Question

我正在尝试在我的create-react-app中使用CSS模块（发布了2.0.0 react-scripts，所以这不是造成问题的原因）。

具体来说，我尝试使用引导CSS将现有项目中的组件使用到我自己的组件中，而不是使用react-bootstrap重写这些组件。这些组件已经使用香草引导类编写了。

但是，尽管将.css前缀添加为bootstrap.module.css，但是import语句似乎将规则带入全局范围，从而破坏了我页面其余部分的样式。为什么会发生这种情况的任何想法？

我像这样导入css模块：

import style from './bootstrap.module.css'

这是我将样式分配给现有组件的方式：

<p className={style.lead}>
the quick brown fox jumped over the lazy dog 
</p>

将类作为'style'的属性访问甚至不起作用-看来我只能进行基于传统字符串的分类：

className="lead"

我不确定我可以显示的代码是否相关，但是请告诉我您是否想看一下。

Answer 1

问题是您的webpack配置不正确，您必须在webpack配置中指定css加载器，如下所示：

module.exports = {
    module: {
        rules: [
            test: /\.css$/,
            use: [
                { loader: 'style-loader' },
                {
                    loader: 'css-loader',
                    options: {
                      sourceMap: true,
                      modules: true,
                      localIdentName: '[local]___[hash:base64:5]',
                    }
                },
            ]
        ]
    }
}

React CSS模块污染了全局名称空间

1 个答案: