Question

以下是我的文件夹结构＆amp; React项目的文件工作正常，但我无法使用CSS通过SCSS通过Webpack添加extract-text-webpack-plugin。让我知道我在配置方面做错了什么。

文件夹结构 -

Webpack.config.js文件 -

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './app/index.html',
    filename: 'index.html',
    inject: 'body'
});
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractTextPluginConfig = new ExtractTextPlugin('main.css',{
    allChunks: true
});

module.exports = {
    entry: './app/app.jsx',
    output: {
        path: path.resolve('dist'),
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {test: /.js$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
        ]
    },
    plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig]
};

Package.json -

{
  "name": "reactyarn",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^2.29.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.3.0",
    "webpack-dev-server": "^2.5.1"
  },
  "dependencies": {
    "path": "^0.12.7",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

仅供参考 -

我在控制台中没有收到任何JS错误，因此我认为它只是配置无效。

Answer 1

您似乎缺少其中一个加载器（sass-loader），并且错误地在模块中设置它们。

尝试以下示例：

module.exports = {
    entry: './app/app.jsx',
    output: {
        path: path.resolve('dist'),
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {test: /.js$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] // <-- this is new
        ]
    },
    sassLoader: {
      includePaths: [path.resolve(__dirname, 'relative/path/to/scss')]
    }, // <--- this is new
    plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig]
};

使用ExtractPlugin.extract您在Webpack 2（使用rules和use）中引用了这样做的方法，但您的Webpack配置文件似乎适用于Webpack 1

SCSS文件没有编译成CSS使用Webpack做出反应

1 个答案: