CssSyntaxError 使用 Webpack 4 构建未知单词

Question

Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    CssSyntaxError

    (1:4) Unknown word

    > 1 | // style-loader: Adds some css to the DOM by adding a <style> tag
        |    ^
      2 | 
      3 | // load the styles

     @ ./node_modules/vue-slider-component/theme/antd.css 4:14-338 14:3-18:5 15:22-346

我在 Webpack 4 中构建我的应用程序时出现此错误。这是我的 CSS 加载器配置：

{
    test: /\.css$/,
    use: ["vue-style-loader", "css-loader", "postcss-loader"]
},
{
    test: /\.scss$/,
    use: ["vue-style-loader", "css-loader", "postcss-loader", "sass-loader"]
}

我怎样才能稍微放宽规则，以免在此类问题上失败？

谢谢

Answer 1

您不能有多个 css-loader。这是一个可能的解决方案：

      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader',
          'postcss-loader',
        ]
      }

CssSyntaxError 使用 Webpack 4 构建未知单词

CssSyntaxError Unknown word building with Webpack 4

webpack

vue.js

babeljs

postcss