网页包：如何使用CSS模块和从外部库导入的CSS？

我在react应用程序中使用css模块，但是当我尝试在.js文件中导入外部文件时，我无法全局导入它们，因为我无法将它们包装在

：global

块中，而webpack将它们解释为用作对象的样式

如何将CSS文件作为全局CSS从外部库导入？这是CSS，应该与导入的插件匹配

e、 g.in src/index.js

import 'draft-js/dist/Draft.css';
//cannot wrap in a :global block since it is imported
import 'react-responsive-carousel/lib/styles/carousel.min.css'; 
// is wrapped in a :global {...} block, so it works
import './styles/app.css'; 

网页包配置，来自CreateReact应用程序

test: /\.css$/,
loader: [
  require.resolve('style-loader'),
  {
   loader: require.resolve('css-loader'),
   options: {
     importLoaders: 1,
     modules: true,
     minimize: true,
    },
   },
    'postcss-loader'
]

---

一个选项是为

src

样式和

node_模块

样式设置两个单独的规则，并且在

src

配置中将

modules

设置为true。它看起来应该类似于下面的内容（我没有对此进行测试）-重要的选项是和，以从应用于

节点\u模块的规则中删除
模块

{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
                importLoaders: 1,
                modules: true,
                minimize: true,
            },
        },
        'postcss-loader'
    ]
},
{
    test: /\.css$/,
    include: /node_modules/,
    loader: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
                importLoaders: 1,
                minimize: true,
            },
        },
        'postcss-loader'
    ]
}

另一个解决方案是将我需要的每个css文件都包含在一个单独的供应商文件夹中。但这似乎效率低下。我的一个node_模块需要css模块，我确实知道如何将其排除在外，尽管。。。