当我将 Webpack 3 更新为 4 时收到 CssSyntaxError答案

【问题标题】：Receiving CssSyntaxError when I updated Webpack 3 to 4当我将 Webpack 3 更新为 4 时收到 CssSyntaxError
【发布时间】：2019-10-04 08:31:14
【问题描述】：

webpack 3 到 4 更新时出现 CssSyntaxError。我在前端使用 vue 和 webpack。错误是这样的。

    [./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 | }

为了更新 webpack，我尝试使用 MiniCssExtractPlugin。更新的 npm 版本如下。

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

我的 webpack.config.js 如下所示。

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

webpack.config.js 中是否有设置错误？

【问题讨论】：

标签： vue.js webpack css-loader vue-loader

【解决方案1】：

这是我的解决方案 - 只需将 'vue-style-loader' 添加到顶部：

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

【讨论】：