Question

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

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是一个引导类，我希望它只是单独留下。有没有办法让css-loader只为顶级css类生成一个id？

Answer 1

基于test配置，您可以为引导程序设置一个加载程序，为css的其余部分设置另一个加载程序。

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

Answer 2

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

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

web pack css-loader用react-bootstrap生成了css类名

2 个答案: