如何使用mini css extract插件将导入的css和从SCS生成的css组合在一个文件中？

我正在php应用程序中使用

webpack4

和

mini-css-extract插件。我保留了我在
scss
文件中编写的所有
css
样式，但在某些情况下，当我导入外部库时，我会在使用它的脚本中导入它的css。我的最终目标是将所有css样式放在一个css文件中，我可以手动将其包含在php视图中，但目前我将SCS放在一个文件中，并从另一个文件的库中获取css

我当前的网页包配置如下：

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
文件中，而我希望它与其他css一起位于
style.css
中

我做错了什么

编辑：
根据建议，我创建了一个github存储库，重新创建了该问题：

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

（~）符号告诉webpack查看节点模块文件夹。
您可以对节点模块文件夹中的任何css/scss文件使用此方法。
编辑：

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

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

console.log('test')

你想要：

…这个css最后出现在vendors.css文件中，而我希望它
将style.css与其他文件一起使用

用乔达姆式的回答。所有这些左，右都把我弄糊涂了。
只需在一个
scss
文件中引用所有样式文件，它们就会捆绑在一起。我仍然不明白为什么要在
scripts.js
中单独导入
nouislider


第一名：

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

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

console.log('test')

style.css
不是应用程序的入口点，它是
script.js
，因为它是项目中唯一的js文件，位于
node\u模块
旁边

webpack.config.js

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

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

您需要做的是：

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

2.）删除webpack.config.js中的
优化部分。你不需要它

3.）移除
ProvidePlugin
（不需要）

4.）导入输入文件中的样式：

scripts.js:

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

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

console.log('test')

样式将按照导入顺序进行渲染

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

对不起，也许我的问题不清楚：插件
NoUiSlider
是用
ProvidePlugin
导入的，
NoUiSlider.css
文件是在脚本中导入的。@Carlo在你的一个scss文件中使用上述方法导入css我只是尝试了你的方法，但它不起作用。使用我当前的网页配置，直接在
main.scss
中导入
nouislider.css
会生成两个单独的css创建一个最小的git repo，它会复制您的问题，所以我们可以看一看…@图例我编辑了我的问题，添加了一个指向最小github存储库的链接。我包含了整个
node\u模块
目录，因此只需运行
npm run build
就足够了。您找到解决方案了吗？我也有同样的问题。我需要
优化
，因为在真正的网站上，我有许多入口点，在
节点模块中有许多库
。将SCS作为切入点真的有问题吗？我有许多入口点，并且我需要在所有入口点中使用相同的css。您可以创建一个
main.scss
文件，然后导入所有
css
和
scss
文件，您希望成为其中的一部分，最后只导入入口脚本中的
main.scss
。您可以保留
优化
部分，但是对于这个小测试repo，它是不需要的。当然，但是我想让配置尽可能与实际配置相似。创建一个假的
style.js
文件只是为了导入
main.scss
和
css
并将其用作入口点，这是可以接受的做法吗？好吧，这不是入口点，不应该使用。目前，webpack文档仍然指向wp v3。这些解决方案的问题是，导入
scs
的位置不明显，我无法选择生成的文件名。这没什么大不了的，但奇怪的是，我最终把
css
命名为脚本，即使它们根本没有关系