Question

我能够通过min-css-extract-plugin顶部生成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的production configuration guide：

与预期相反，process.env.NODE_ENV未在构建脚本"production"内设置为webpack.config.js，请参见#2537。因此，webpack配置中的process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'之类的条件无法正常工作。

您需要编写没有style-loader的CSS规则，mini-css-extract-plugin的加载程序才能生效：

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

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

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

1 个答案: