Получение CssSyntaxError при обновлении Webpack 3 на 4 - PullRequest
Новая
       70

Получение CssSyntaxError при обновлении Webpack 3 на 4

0 голосов
/ 17 мая 2019

Я получил CssSyntaxError, когда обновил webpack 3 до 4. Я использую vue и webpack в frontside. Ошибка выглядит следующим образом. 

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

Ответы [ 2 ]

0 голосов
/ 10 июля 2019

Вот мое решение - просто добавьте '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',
            ],
          },
0 голосов
/ 17 мая 2019

Я не уверен насчет вашей конфигурации, потому что о вашей ошибке действительно трудно сказать, поэтому я думаю, что есть какая-то проблема с вашим пакетом загрузчика. Ниже мой конфиг, так что вы можете проверить с вашим 

        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },

А также, пожалуйста, удалите строку // line-height: 0; Я думаю, что загрузчик css не будет рад видеть этот комментарий, который не может преобразовать CSS

...