css - Webpack scss 加载器、css 加载器和 post css

Question

我正在尝试为使用 ES6 类的应用程序设置 webpack。我使用 Sass，但还有一个我导入的 vendor css 文件。使用 @import 将 sass 部分导入到 sytle.scss。在我添加 postcss 加载器之前它一直运行良好，但现在我在尝试编译时收到一条错误消息，但它失败了。

在 webpack.config.js 中:

const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css"
})

const config = {
    .
    .
    .

    module: {
        rules: [{
            test: /\.(scss|css)$/,
            use: extractSass.extract({
                use: [{
                    loader: "sass-loader", options: {
                        sourceMap: true
                    }},
                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    { 
                        loader: "css-loader", options: {
                        sourceMap: true,
                        importLoaders: 3,
                        modules: true
                    }}
                ],
                fallback: "style-loader"
            })
        }
       ]
      },
     plugins: [
        extractSass
        ...
     ]
  }

postcss.config.js:

module.exports = {
    plugins: {
      'postcss-import': true,
      'autoprefixer': {browsers: ['> 5%', 'last 3 versions']},
    }
}

在 app.js 中:

import '../../scss/style.scss'
import '../../scss/vendors/select2.css;

这是错误:

ERROR in ./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/style-loader!./node_modules/css-loader?{"sourceMap":true,"importLoaders":3,"modules":true}!../scss/style.scss
Module build failed: Syntax Error 

(5:1) Unknown word

  3 | // load the styles
  4 | var content = require("!!../offline/node_modules/css-loader/index.js?{\"sourceMap\":true,\"importLoaders\":3,\"modules\":true}!./style.scss");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // Prepare cssTransformation
  7 | var transform;

Answer 1

当链接加载器时，它们是从右到左应用的。在您的情况下，您首先尝试在 scss 文件上使用 css-loader。

尝试颠倒加载程序的顺序

        use: [{
            { 
                loader: "css-loader", options: {
                sourceMap: true,
                importLoaders: 3,
                modules: true
            }},
            {
                loader: "postcss-loader",
                options: {
                    sourceMap: true
                }
            },
            loader: "sass-loader", options: {
                sourceMap: true
            }}
        ],