Question

我正在尝试为使用ES6类的应用设置webpack。我使用Sass，但还有一个我导入的供应商css文件。 sass部分导入sytle.scss uing @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;

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

Webpack scss loader，css loader和post css

1 个答案: