Webpack：如何使用CSS模块和来自外部库的导入CSS？

Question

Webpack：如何使用CSS模块和来自外部库的导入CSS？

4

我在我的react应用程序中使用css模块，但是当我尝试在.js文件中导入外部文件时，无法将它们全局导入，因为无法将它们包装在:global块中，webpack会将它们解释为要用作对象的样式。

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

例如，在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';

Webpack配置，来自Create-React-App

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

- Yu Mad

另一个解决方案是将我需要的每个 CSS 文件都包含在单独的供应商文件夹中。但这似乎效率低下。 - Yu Mad

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bschnelle · Accepted Answer

一种选择是为src样式和node_modules样式设置两个单独的规则，并且仅在src配置中将modules设置为true。它应该类似于以下内容（我没有测试过）——重要的选项是include和exclude，并从适用于node_modules的规则中删除modules。

{
    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'
    ]
}