css - 如何使用 mini-css-extract-plugin 将导入的 css 和从 scss 生成的 css 合并到一个文件中？

Question

我正在使用 Webpack 4和 mini-css-extract-plugin在一个 php 应用程序中。我保留所有 css我在 scss 中编写的样式文件，但在某些情况下，当我导入外部库时，我会在使用它的脚本中导入它的 css。我的最终目标是将所有 css 样式都放在一个单独的 css 文件中，我可以手动将其包含在 php View 中，但目前我在一个文件中获取 scss，而在另一个文件中获取来自库中的 css。

我当前的 webpack 配置是这样的:

module.exports = {
  devtool: 'source-map',
  entry: {
  style: './resources/assets/sass/style.scss',
  ...
},
 optimization: {
   splitChunks: {
     cacheGroups: {
       default: false,
        styles: {
          name: 'styles',
          test: /\.s?css$/,
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true,
        },
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          //minChunks: 2,
        },
      },
    },
  },
  module: {
    rules: [
      { 
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: { config: { path: 'postcss.config.js' } },
          },
          'sass-loader',
        ],
      },
plugins: [
new MiniCssExtractPlugin({
      filename: '[name].[chunkhash].css',
    }), 
new webpack.ProvidePlugin({
     noUiSlider: 'nouislider',
   }),
]

scss样式工作正常，但是在一个脚本中我有这个:

import 'nouislider/distribute/nouislider.css';

这是来自 ProvidePlugin 中包含的脚本这个 css 最终出现在 vendors.css文件，而我希望它在 style.css与其他人一起。

我究竟做错了什么？

编辑:
按照建议，我创建了一个 github 存储库来重新创建问题:

https://github.com/carlotrimarchi/webpack-test

Answer 1

添加 @import '~nouislider/distribute/nouislider.css';到您的 scss 文件之一。
无需使用 ProvidePlugin 来导入 css。

( ~ ) 符号告诉 webpack 查看 node_modules 文件夹。
您可以将此方法用于 node_modules 文件夹中的任何 css/scss 文件。