Javascript 迷你css提取插件不'；t使用sass将我的css绑定到一个文件中

当我尝试添加sass加载程序并运行webpack时，dist文件夹中有多个chunck.css文件，而不仅仅是名为“style.css”的捆绑文件

我的dist输出文件夹如下所示：

0.e749007119be51de03e4.js  1.e749007119be51de03e4.js  bundle.e749007119be51de03e4.js
0.style.css                1.style.css

我猜这是因为迷你css提取插件，但我不知道如何修复它

这是我的网页文件：

const webpack = require('webpack');
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const ROOT = resolve(__dirname);
const SRC = resolve(ROOT, 'src');

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  entry: {
    bundle: [
      'react-hot-loader/patch',
      'webpack-hot-middleware/client?reload=true',
      resolve(SRC, 'client', 'index.js'),
    ]
  },
  output: {
    path: resolve(ROOT, 'dist', 'client'),
    filename: '[name].[hash].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        include: resolve(__dirname, 'node_modules', 'react-toolbox'),
        use: [
          MiniCssExtractPlugin.loader,
          // 'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: '[name]_[local]_[hash:base64:5]'
            }
          },
          // 'postcss-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.css$/,
        exclude: resolve(__dirname, 'node_modules', 'react-toolbox'),
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(jpe?g|svg|png|gif)$/,
        use: ['file-loader']
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader']
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
  ]
};

---

有什么想法吗？

从文档中查看这段代码

module: {
  rules: [
    {
      test: /\.(sa|sc|c)ss$/,
      use: [
        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader',
        'sass-loader',
      ],
    }
  ]
}

如果您仔细观察，您会发现它在开发模式下使用

样式加载器

，在生产模式下使用

minicsExtractPlugin.loader

。因此，在生产中，它将为css生成另一个文件

您需要做的是：

在脚本部分的

package.json

文件中，您需要像这样传递一个env变量

devMode

"scripts": {
  "webpack": "webpack",
  "start": "npm run webpack -- --env.mode=development"
}

然后在

webpack.config.js

文件中执行此操作

module.exports = (env) => {
  const devMode = env.mode === 'development'
  return {
    mode: env.mode, // will be development
    devtool: ...,
    entry: { ... },
    output: { ... },
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        }          
      ]
    }
  }
}

那应该没问题，希望有帮助

---

这样做会带来两个问题。若我想使用类似html网页包插件的插件，index.html文件将不再填充。其次，MinicsExtractPlugin的正常行为不应该是像我在构造函数中所描述的那样创建一个文件style.css

---

不，因为您有异步块，所以它将为从这些异步块中删除的每个样式创建一个style.css

---

我向您保证，如果您使用的是html网页包插件，它将工作。它只是没有添加到那里，因为那些css不是来自其中一个入口点。这就是为什么它没有直接插入html。我有一个类似的项目，它的工作非常完美

如果这些块不是从入口点发出的，那么一旦请求了这些块，webpack就会动态加载这些块

---

大文件会伤害用户。代码拆分永远是解决一切问题的答案

这就是代码拆分，为什么您会为此烦恼？它正在帮助你。。。大文件大小会伤害用户。这种方式会带来两个问题。如果我想使用像

html网页包插件那样的插件，index.html文件不再填充
。其次，MinicsExtractPlugin的正常行为不应该像我在构造函数中所精确描述的那样创建一个文件style.css？不，因为您有异步块，它将为从这些异步块中删除的每个样式创建一个style.css。我向您保证，如果您使用html网页包插件，它将正常工作。它只是没有添加到那里，因为那些css不是来自其中一个入口点。这就是为什么它没有直接插入html。我有一个类似的项目，它工作得很好。我会把这个作为一个答案，关于所有你提出的问题。非常感谢你的快速回答！我以前也在文档中看到过这一点，问题是即使这样，我也在尝试使用
样式加载器
在开发模式下，scss文件不再在任何.css文件中输出..您是否尝试合并
css
的规则可能就是问题所在，现在您有两个问题，我无法合并它们，因为我正在对react工具箱库使用包含/排除的特定配置。。仍然要尝试：）似乎是正确的答案，我标记它作为解决方案，同时我测试一切！