0

我正在尝试为使用 ES6 类的应用程序设置 webpack。我使用 Sass，但我还导入了一个供应商 css 文件。sass 部分被导入到sytle.scssuing @import。在我添加 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;
4

1 回答 1

5

链接加载程序时，它们从右到左应用。在您的情况下，您尝试首先在 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
            }}
        ],
于 2017-09-22T09:58:23.100 回答