Webpack：mini-css-extract-plugin未输出CSS文件

Question

我认为我正确按照文档操作，但它完全不起作用。

我的目标是生成一个CSS文件，并且不使用JS在样式标签中加载它。

在我的src目录中有"scss/custom.scss"和"style.scss"，但它们都没有被生成到输出目录中。

编辑：源代码：https://github.com/marcosroot/webpackexample

我的设置如下：

const path = require('path');
const BundleTracker = require('webpack-bundle-tracker');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = true;

module.exports = {
    entry: [
        './src/toggle_menu.js',
        './src/calls_apis.js'
    ],
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: devMode ? 'main.js' : 'main.[hash].js',
    },
    plugins: [
        new BundleTracker({
            filename: './webpack-stats.json'
        }),
        new MiniCssExtractPlugin({
            filename: devMode ? '[name].css' : '[name].[hash].css'
        })
    ],
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            },
            {
                test: /\.scss$/,
                include: path.resolve(__dirname, 'scss/custom.scss'),
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ]
            }
        ]
    },
}

- marcos souza

---

看起来你需要提供输出的相对路径。我在我的项目中有一个next配置new MiniCssExtractPlugin({filename: DEV ? '../css/_.css' : '../css/_-[contenthash].css'}),。 - Pavlo Zhukov

Answer 1

这个问题比较老，但我遇到了同样的问题并想分享我的解决方案。虽然这可能与你的配置有关，但无论如何，我使用mini-css-extract-plugin时出了一些问题，因为：

• 我使用 webpack -p 运行它（这是生产模式+压缩的别名）
• 我设置的 css 规则没有明确说明它具有副作用。

结果，在生产模式下运行构建（即webpack -p）时，它没有生成输出，因为当 webpack 看到这个时……

import './my-css-file.css';

...并且说："那个没什么作用，我会从你的构建中移除它"。

---

因此，为了告诉webpack这种类型的文件很重要，您必须将规则标记为sideEffects: true

// ...
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
        include: [/* fill this in */],
        exclude: /node_modules/,
        // 
        sideEffects: true, //  ADD THIS
        // 
      },
    ],
  },
  // ...
}

- Rico Kahler

---

谢谢您添加这个。当我管理CSS模块的规则和非CSS模块的规则时，我也遇到了同样的问题。非CSS模块规则基本上删除了捆绑包，我无法弄清楚原因。果然，这个解决方案按预期工作。 - shanewwarren

谢谢。这正是我需要的。 - kshreve

Answer 2

我认为您的问题来自于配置文件中错误的路径解析：

include: path.resolve(__dirname, 'scss/custom.scss'),

这意味着告诉webpack仅包含位于{root}/scss/custom.scss下的资源，鉴于您的解释，我认为正确的路径应该是{root}/src/scss/custom.scss。

因此，要包含您的两个文件{root}/src/scss/custom.scss和{root}/src/styles.scss以及位于src文件夹中的任何其他scss文件，您可以使用：

module: {
    rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
            }
        },
        {
            test: /\.scss$/,
            include: /src/, // <-- Change here ---------------------
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader',
                'sass-loader',
            ]
        }
    ]
},

如果你非常确定在项目或节点模块中没有其他漫游的scss文件，也不应该同时打包，那么你还可以简单地删除include选项（这可能是情况）。

如果要在路径解析中添加src，你还可以提供两个文件的数组：

include: [
   path.resolve(__dirname, 'src/scss/custom.scss'),
   path.resolve(__dirname, 'src/styles.scss'),
]

******编辑*******

根据你的评论以及从你的存储库中获取的信息，有几个错误：

• postcss-loader并未被包含在dev依赖项中，并且也没有对其进行配置
• 您误解了规则的include选项。它只是表示只有符合包含测试的资源才会像该规则中配置的那样被处理。 您仍然需要在某些时候在脚本中引用scss文件。

我已经forked了你的repo并设置了正确的配置，将scss导入到call_api.js（你的入口之一）中。构建后，您将在dist文件夹中看到css文件（我为postcss设置了一个简单的cssnano配置，这将被严格分析）。

- Bertrand

Answer 3

不适用于 Op 的情况。但在我的情况下：
（我对原因没有足够的了解）

看起来当你使用 MiniCssExtractPlugin.loader 时，必须移除 'style-loader'。

• （另外，如果你将 MiniCssExtractPlugin.loader 放在 'style-loader' 之前，就不会出现错误，你也不会注意到它。）

- Nor.Z

Answer 4

您需要在文件名中提供相对路径，或在加载器配置中指定publicPath: '../'https://www.npmjs.com/package/mini-css-extract-plugin#minimal-example

在我的项目中，我有

new MiniCssExtractPlugin({filename: DEV ? '../css/styles.css' : '../css/styles-[contenthash].css'}),

文档提供了公共路径的示例

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
              publicPath: '../'
            }
          },
          "css-loader"
        ]
      }
    ]
  }
}

- Pavlo Zhukov