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

Question

我能够成功地使用min-css-extract-plugin生成css文件，但似乎无法将其用于SASS。在使用webpack dev server时它运行良好，但它始终将我的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"
    })
  ]
}

- brunam

---

你的 index.js 文件里面有什么内容？ - Adam

构建过程是否在输出文件夹中创建了CSS文件？如果是这样，您可能只需要使用HtmlWebpackPlugin将其加载到index.html中。CSS在开发服务器上正常工作，因为style-loader将其作为<style>标签注入到页面顶部。 - Stevethemacguy

Answer 1

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

从Webpack的生产配置指南中可以看到:

与预期相反，在构建脚本webpack.config.js中，process.env.NODE_ENV未被设置为"production"，详见#2537。 因此，像process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'这样的条件句在Webpack配置中不会按预期工作。

您需要编写不带有style-loader的CSS规则，以使mini-css-extract-plugin的加载器生效。

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

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

- Adam