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',
                ]
            }
        ]
    },
}

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
        // 
      },
    ],
  },
  // ...
}

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下的任何其他 scss 文件src，您可以使用：

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',
            ]
        }
    ]
},

include如果您非常确定项目或节点模块中没有其他漫游 scss 文件，并且不应该同时捆绑（可能是这种情况），您也可以简单地删除选项。

您还可以通过在路径解析中添加 src 来提供两个文件的数组：

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

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

根据您的评论和存储库，还有另外一些错误：

• postcss-loader不包含在开发依赖项中，也没有对其进行配置
• include你弄错了规则的选项是什么。它只是意味着只有与包含测试匹配的资源才会像该规则中配置的那样进行处理。您仍然需要在脚本中的某个时刻需要 scss 文件。

我已经分叉了您的存储库，并在 call_api.js （您的入口点之一）中使用 scss import 设置了正确的配置。构建，你将在 dist 文件夹中看到 css 文件（我已经为 postcss 设置了一个愚蠢的 cssnano 配置，它将被解析得很严酷）