3

我能够得到 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"
    })
  ]
}
4

1 回答 1

4

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

来自 Webpack 的生产配置指南：

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

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

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

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

于 2018-09-18T23:17:34.480 回答