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

Question

我正在使用Webpack 4和mini-css-extract-plugin在一个 php 应用程序中。我将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文件中，然后它们就会捆绑在一起。我仍然不明白你为什么要单独导入nouisliderin scripts.js...

---

第一的：

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.) 删除optimizationwebpack.config.js 中的部分。你不需要它。

3.）删除ProvidePlugin（不需要）

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

脚本.js：

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

console.log('test')

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

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