Question

我无法让我的CSS与webpack css / scss loader一起工作。这是我配置的一部分：

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                {loader: 'style-loader'},
                {loader: 'css-loader'},
            ],
        },
        {
            test: /\.scss$/,
            use: [
                {loader: 'style-loader'},
                {loader: 'css-loader'},
                {
                    loader: 'sass-loader',
                    options: {
                        sourceMap: true,
                        includePaths: ['./src'],
                    }},
            ],
        },
        ...

据我所知，这将从.scss位置内的任何子文件夹加载任何./src文件。所以我在src/components/foo/styles.scss中有以下文件：

body {
  background-color: green;
}

它不起作用。这里有什么问题？您还需要更多详细信息吗？

Answer 1

您需要一个带有require()语句的index.js文件，该语句会加载到.scss / .css文件中。 Webpack通过加载应用程序中的所有 javascript 依赖项来工作，因此您需要引导该过程。

我相信您还需要使用ExtractTextPlugin将.scss转换为CommonJS（不幸的是，这里不能告诉您更多信息）。

供参考，这是我的index.js（与app.scss在同一目录中）：

require('./app.scss')

和部分webpack.config.js（我省略了输入内容和输出配置）：

var ExtractTextPlugin = require("extract-text-webpack-plugin")
...
var config = {
    module: {
      rules: [
        // sass
        {test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader"
                }]
            })
        },
        // for any images in your scss
        {test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader?limit=100000'
        }
      ]
   },

   entry: [...],

   plugins: [
      new ExtractTextPlugin("../styles/css/[name].css")
   ]
}

module.exports = config

样式不会加载webpack

1 个答案: