Webpack scss加载器，css加载器和post CSS

Question

我正在尝试为使用ES6类的应用程序设置webpack。 我使用Sass，但是我也导入了一个供应商的CSS文件。 使用@import将sytle.scss部分导入到sytle.scss 。 在添加postcss loader之前，它一切正常，但是现在尝试编译时出现错误消息，但失败。

在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
            }}
        ],