如何使用 webpack 4 和 mini-css-extract-plugin 生成 css 文件？

Question

我能够让 min-css-extract-plugin top 生成 css 文件就好了，但我似乎无法让它与 SASS 一起使用。当我使用 webpack 开发服务器时，它运行得很好，但它不断将我的 scss 插入我的 javascript 文件，而不是创建单独的 CSS 文件。

我有index.html，index.js和main.scss存储在/src下

webpack.config.js：

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


module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // fallback to style-loader in development
          process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
      ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
}

Answer 1

要mini-css-extract-plugin实际将 CSS 提取到单独的文件中，您需要将 CSS（或其他扩展名）导入到一个entry文件中（index.js在您的情况下）。此外，使用process.env.NODE_ENV的值来确定 Webpack 配置中的开发或生产设置实际上不起作用。

来自Webpack的生产配置指南：

与预期相反，未在构建脚本中process.env.NODE_ENV设置，请参阅#2537。因此，像webpack 配置中的条件不能按预期工作。"production" webpack.config.jsprocess.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'

您需要在没有style-loaderformini-css-extract-plugin加载器的情况下编写 CSS 规则才能生效：

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

然后，由于您style-loader从规则中删除，因此您需要为生产和开发创建单独的 Webpack 配置，以便您可以在开发中使用它。