Receiving CssSyntaxError when I updated Webpack 3 to 4

Question

I got CssSyntaxError when I updated webpack 3 to 4.I use vue and webpack in frontside.The error is like this.

    [./node_modules/css-loader/dist/runtime/api.js] 2.35 KiB {mini-css-extract-plugin} [built]

    ERROR in ./app/javascript/hoge.scss (./node_modules/css-loader/dist/cjs.js??ref--3-2!./app/javascript/hoge.scss)
    Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    CssSyntaxError

    (891:6) Unknown word

      889 |   background-color: #eeeeee;
      890 |   box-shadow: 0px 0px 5px #000;
    > 891 |   // line-height: 0;
          |      ^
      892 | }

To update webpack I try to use MiniCssExtractPlugin. updated npm version is like below.

webpack                   latest  3.12.0  ❯  4.30.0
webpack-dev-server        latest  2.11.1  ❯  3.3.1 
vue                       latest  2.5.21  ❯  2.6.10
vue-loader                latest  14.2.3  ❯  15.7.0  
css-loader                latest  1.0.1   ❯  2.1.1 
sass-loader@7.1.0

My webpack.config.js is like this below.

const MiniCssExtractPlugin = require('mini-css-extract-plugin')





  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]-[hash].css'
    }),
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        use: [
          'vue-style-loader',
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: { modules: true }
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.(css)$/,
        use: [
          'vue-style-loader',
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: { modules: true }
          }
        ]
      }
    ]
  }

Is there any wrong setting in webpack.config.js?

Answer 1

Here is my solution - Just add 'vue-style-loader' to top:

      module: {
        rules: [
          {
            test: /\.(sa|sc|c)ss$/,
            use: [
              'vue-style-loader',
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  hmr: process.env.NODE_ENV === 'development',
                  minimize: true,
                  sourceMap: true
                },
              },
              'css-loader',
              'sass-loader',
              //'postcss-loader',
            ],
          },