mini-css-extract-plugin：解压文件后，无错误的css文件出现“Missed semicolon”错误

Question

这是语法错误：

在下面的[name].module.css中，不存在分号问题。 这是我的 module.css 文件：

/* Groningen */

.groningen p,
.groningen h3,
.groningen a:hover,
.groningen li:hover,
.groningen h4 a:hover {
  color: #017363 !important;
}

.groningen button {
  background-color: #017363 !important;
  border: #017363 !important;
}

.groningen .thumbnail-inner-2::before {
  background-color: #017363 !important;
  background-image: linear-gradient(#017363 10%, #000000 100%) !important;
}

::-webkit-scrollbar-thumb {
  background-color: #017363 !important;
}

/* Rotterdam */

.rotterdam p,
.rotterdam h3,
.rotterdam li:hover,
.rotterdam a:hover,
.rotterdam h4 a:hover {
  color: #004ab0 !important;
}

.rotterdam button,
.rotterdam button {
  background-color: #004ab0 !important;
  border: #004ab0 !important;
}

.rotterdam .thumbnail-inner-2::before {
  background-color: #004ab0 !important;
  background-image: linear-gradient(#004ab0 10%, #000000 100%) !important;
}

::-webkit-scrollbar-thumb {
  background-color: #004ab0 !important;
}

/* leeuwarden */

.leeuwarden p,
.leeuwarden h3,
.leeuwarden a:hover,
.leeuwarden li:hover,
.leeuwarden h4 a:hover {
  color: #ff914d !important;
}

.leeuwarden button {
  background-color: #ff914d !important;
  border: #ff914d !important;
}

.leeuwarden .thumbnail-inner-2::before {
  background-color: #ff914d !important;
  background-image: linear-gradient(#ff914d 10%, #000000 100%) !important;
}

::-webkit-scrollbar-thumb {
  background-color: #ff914d !important;
}

这是 webpack.common.js

const paths = require('./paths');
const path = require('path');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: [paths.src + '/index.js'],
  plugins: [
    new CleanWebpackPlugin(),

    new CopyPlugin({
      patterns: [
        {
          from: paths.public + '/assets',
          to: 'assets',
        },
      ],
    }),

    new HtmlWebpackPlugin({
      favicon: path.resolve(__dirname, '../public/favicon.ico'),
      template: path.resolve(__dirname, '../public/index.html'), // template file
      filename: 'index.html', // output file
    }),
  ],

  resolve: {
    extensions: ['.js', '.jsx'],
    fallback: {
      fs: false,
      assert: require.resolve('assert'),
      buffer: false,
      console: false,
      constants: require.resolve('constants-browserify'),
      crypto: false,
      domain: false,
      events: false,
      http: false,
      https: false,
      os: false,
      path: require.resolve('path-browserify'),
      punycode: false,
      process: false,
      querystring: false,
      stream: false,
      string_decoder: false,
      sys: false,
      timers: false,
      tty: false,
      url: false,
      util: require.resolve('util'),
      vm: false,
      zlib: false,
    },
  },
  module: {
    rules: [
      { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'] },
      {
        test: /\.html$/,
        use: ['html-loader'],
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { url: false },
          },
          {
            loader: 'resolve-url-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              mimetype: 'application/font-woff',
            },
          },
        ],
      },
      {
        test: /\.(ttf|eot|svg|png|jpg|jpeg|gif|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]',
              outputPath: 'images',
            },
          },
        ],
      },
    ],
  },
};

这里是webpack.prod.js

const path = require('path');
const paths = require('./paths');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  devtool: false,
  output: {
    path: path.resolve(__dirname, paths.build),
    publicPath: '/',
    filename: 'js/[name].[contenthash].bundle.js',
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { url: false },
          },
          {
            loader: 'resolve-url-loader',
            options: {
              sourceMap: true, // Ensure sourceMap is set to a boolean value
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true, // Ensure sourceMap is set to a boolean value
            },
          },
        ],
        sideEffects: true,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
        sideEffects: true,
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    runtimeChunk: {
      name: 'runtime',
    },
  },
});

修复方法是什么？由于代码在 Webpack 开发环境中运行良好，但在生产环境中运行不佳。

希望知道我应该在哪里放置分号的修复方法？

Answer 1

发生这种情况是因为在生产环境中为

*.scss

和

*.css

文件加载了冲突的加载程序。它在开发模式下工作，因为您仅使用

webpack.common.js

文件。在生产中，您使用

webpack-merge

进行合并，这将为

module.rules

生成以下输出

{
  rules: [
    { test: /\.(js|jsx)$/ },
    { test: /\.html$/ },
    { test: /\.scss$/ },
    { test: /\.css$/ },
    { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/ },
    {
      test: /\.(ttf|eot|svg|png|jpg|jpeg|gif|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  
    },
    { test: /\.scss$/ },
    { test: /\.css$/ }
  ]
}

如果您只是从

webpack.common.js

文件中注释掉 CSS 加载器，那么它就可以用于生产。

// Comment this out.
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader'],
},

有几种方法可以解决这个问题。最明显的是使用环境标志/变量来有条件地配置正确的加载器。

mini-css-extract-plugin

已经有一个很好的例子来展示这一点。

第二个选项是拥有三个文件，然后在其他每个文件中使用通用配置：

• common.js

  - 通用配置。

• dev.js

  - 仅开发配置，您使用

  style-loader

  作为 CSS。

• prod.js

  - 使用

  mini-css-extract-plugin

  加载程序的产品配置。

顺便说一句，您的配置还不够复杂，不足以保证使用像

webpack-merge

这样的东西。只需使用带有对象扩展和解构功能的普通 JavaScript，就可以开始了。