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運行它（它是生產模式 + 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',
            ]
        }
    ]
},

如果您非常確定在您的項目或節點模塊中沒有其他漫游 scss 文件可能會被找到並且不應該被同時捆綁（這可能是這種情況），您也可以簡單地刪除include選項。

您還可以通過在路徑解析中添加 src 來提供兩個文件的數組：

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

****** 編輯 *******

根據您的評論和您的回購，還有一些錯誤：

• postcss-loader不作為開發依賴項包括在內，也沒有對其進行配置
• 你弄錯了規則的include選項是什么。 它只是意味着只有與包含測試匹配的資源才會按照該規則中的配置進行處理。 您仍然需要在腳本中的某個點需要 scss 文件。

我已經分叉了您的 repo，並在 call_api.js（您的入口點之一）中使用 scss 導入設置了正確的配置。 構建，您將在 dist 文件夾中看到 css 文件（我已經為 postcss 設置了一個愚蠢的 cssnano 配置，它將被粗暴地解析）

Answer 3

您需要在文件名中提供相對路徑或在加載程序配置中指定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"
        ]
      }
    ]
  }
}