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

Question

我在 php 应用程序中使用 Webpack 4 和 mini-css-extract-plugin。我将我编写的所有css 样式保留在scss 文件中，但是在某些情况下，当我导入一个外部库时，我会在我使用它的脚本中导入它的css。我的最终目标是将所有 css 样式放在一个 css 文件中，我可以手动将其包含在 php 视图中，但目前我将 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 文件。

Answer 2

编辑：

你想要：

...这个 css 最终出现在 vendor.css 文件中，而我希望它 与其余部分一起在 style.css 中。

使用 Gautams 答案。这一切左，右让我感到困惑。 只需将所有样式文件引用到一个scss 文件中，然后它们就会捆绑在一起。我仍然不明白你为什么在scripts.js 中单独导入nouislider...

---

第一：

entry: {
  style: './resources/assets/sass/style.scss',

style.css 不是您的应用程序的入口点，它是 script.js，因为它是您项目中唯一的 js 文件，除了 node_modules。

webpack.config.js

 entry: {
        // style: './resources/assets/scss/main.scss',
        common: './resources/assets/js/script.js',
    },

在 wp4 中：插件、供应商脚本、css 文件不是应用程序的入口点！不要在entry下添加它们

你需要做什么：

1.) 如上所述更改您的入口点

2.) 删除 webpack.config.js 中的 optimization 部分。你不需要它。

3.) 删除ProvidePlugin（不需要）

4.) 在你的入口文件中导入样式：

scripts.js：

import "../scss/main.scss"
import 'nouislider/distribute/nouislider.css';

console.log('test')

样式按照您导入它们的顺序呈现。

WP4 会自动为您的应用创建优化的输出包。 因此，对于您的小测试 repo 和采用的更改 1-4，您将获得一个 js bundle 和一个 css bundle。