Question

我认为我正确地遵循了文档，但是根本不起作用。

我想要的是生成一个CSS文件，并且不要使用js将其加载到样式标签中。

在我的src目录中：“ scss / custom.scss”和“ style.scss”，但在输出中都不生成它们。

编辑：src代码：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和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未包含为开发人员依赖项，也未对其进行配置
您误解了规则的include选项。它确实只是意味着将像在该规则中配置的那样，仅处理与包含测试匹配的资源。 您仍然需要在脚本中的某个时刻要求scss文件。

我已经forked your repo并使用call_api.js（您的入口点之一）中的scss import设置了正确的配置。构建后，您将在dist文件夹中看到css文件（我为postcss设置了一个笨拙的cssnano配置，将对其进行严格解析）

Answer 3

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

在我的项目中，

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"
        ]
      }
    ]
  }
}

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

3 个答案: