CssSyntaxError Unknown word building with 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

I have this error when building my app in Webpack 4. This is my CSS loader config:

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

How can I relax the rules a bit so it doesn't fail on these kind of issues?

Thanks

Answer 1

You can't have multiple css-loaders. Here is a possible solution:

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