webpack css-loader 生成 css class names with react-bootstrap

Question

我正在为 web pack 使用 css-loader，配置如下所示：

loaders: [
{
   test: /\.css$/,
   loader: ExtractTextPlugin.extract('style-loader', 'css-loader?camelCase&modules')
}, ...]

然后在我的 jsx 文件中有这样的内容：

import styles from 'components/MyComponent/style.css'

export default class MyComponent extends React.Component {
    render() {
        return (
            return <div className={styles.myComponent}>
                <Media>
                    <Media.Left>
                    ...
                    </Media.Left>
                    <Media.Body> 
                    ...
                    </Media.Body>
                </Media>
            </div>
        )
    }
}

在我的 components/MyComponent/style.css 文件中，我有类似的内容：

.myComponent .media-left {
    vertical-align: middle;
}

所以我的问题是，css-loader 将为 .myComponent 和 .media-left 生成随机 ID，这非常烦人。因为 .media-left 是 bootstrap class 并且我希望它单独放置。有没有办法让css-loader只为顶层css生成一个id class?

Answer 1

根据 test 配置，您可以为 bootstrap 使用一个加载程序，为 css 的其余部分使用另一个加载程序。

另一方面，css-loader 配置的 modules 部分负责随机 class 名称。您可以使用 localIdentName 配置来根据您的喜好格式化生成的 class 名称。

Answer 2

所以我想通了。我需要为每个我想保持全局的 class 使用全局选择器，如下所示：

.myComponent :global(.media-left) {
    vertical-align: middle;
}

webpack css-loader 生成 css class names with react-bootstrap

web pack css-loader generated css class names with react-bootstrap

reactjs

webpack

react-bootstrap

css-loader