如何使用mini-css-extract-plugin将scss生成的导入的css和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';添加到其中一个ur scss文件中。 无需使用ProvidePlugin导入css。

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

Answer 2

修改

你想：

  

...而且这个css最终出现在vendors.css文件中，而我希望如此   与其他人一起在style.css中。

使用Gautams回答。所有这一切离开了，对我困惑了。 只需在一个scss文件中引用所有样式文件，然后将它们捆绑在一起。我仍然不明白为什么你在nouislider中单独导入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。）删除webpack.config.js中的optimization部分。你不需要它。

3。）删除ProvidePlugin（不需要）

4.。）在条目文件中导入样式：

<强> scripts.js中：

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

console.log('test')

样式按照导入顺序呈现。

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