使用提取文本插件

Question

我能够将scss文件转换为css文件，但唯一的导入在构建期间不起作用。因为* .js导入.scss文件。我尝试在构建期间用.css替换.scss。

js仍然引用了dist文件夹中不存在的scss文件，因为所有scss都按正常css分发

错误：

ERROR in ./src/Checkbox/Checkbox.js                               
Module not found: Error: Can't resolve './Checkbox.css' in '/src/Checkbox'
         @ ./src/Checkbox/Checkbox.js 36:0-22
         @ ./src/index.js**

的src / checkbox.js

'use strict';
import {Checkbox} from 'semantic-ui-react';
import * as React from 'react';
import PropTypes from 'prop-types';

// Style
import './Checkbox.scss';
 react code...

dist / checkbox.js 已编译的JS文件（看起来像）

var _propTypes2 = _interopRequireDefault(_propTypes);

require('./Checkbox.scss');

**I am expecting require('./Checkbox.css');**

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }                                                
and so on ...

* .js导入.scss文件。我尝试在构建期间用.css替换.scss

我的webpack.config.js

const webpack = require('webpack')
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractLESS_checkbox = new ExtractTextPlugin({
  filename: 'component/Checkbox.css',
  allChunks: true
});
const config = {
  entry : {
    index:'./src/index.js'
  },
  output : {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    pathinfo: true
  },
  devtool: 'source-map',
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      loader: 'babel-loader',
      //enforce: 'pre',
      exclude: /node_modules/,
    }, {
      test: /\.scss$/,
      enforce: 'pre',
      use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
         ['css-loader', 'resolve-url-loader', 'sass-loader']})

    ]
  },
plugins: [
    extractLESS_checkbox
  ],
externals: {
    'react/addons': true,
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true
  }
};

module.exports = config;

我的package.json

"name": "name",
"version": "0.1",
"description": "Elements",
"author": "dg",
 "license": "ISC",
  "jsnext:main": "dist/es/index.js",
  "main": "dist/commonjs/index.js",
  "module": "dist/es/index.js",
  "scripts": {
    "build": "npm run build:commonjs && npm run build:es",
so on ....
  } 
  "dependencies" : { ...} 
  "devDependencies" : {... }

我做错了什么，请建议我

Answer 1

使用提取文本插件

use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
        {
            loader: 'css-loader',
            options: {
                sourceMap: true,
            },
        }, {
            loader: 'sass-loader',
            options: {
                sourceMap: true
            },
        }, {
            loader: 'import-glob-loader',
        },
    ]
})

应该看起来像这样

Commonjs：在构建期间，如何更改文件的扩展名

1 个答案:

使用提取文本插件