1

I'm using css-loader for web pack, and the configuration looks like this:

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

And then in my jsx file I have something like this:

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>
        )
    }
}

And in my components/MyComponent/style.css file I have something like:

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

And so my problem is, css-loader will generate random ids for both .myComponent and .media-left, which is seriously annoying. Because .media-left is a bootstrap class and I want it just left alone. Is there a way to make css-loader only generate an id for the top level css class?

4

2 回答 2

2

根据配置，您可以为引导程序设置一个加载程序，而为其余的 css 设置另一个加载程序test。

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

于 2016-06-17T20:18:32.993 回答
1

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

.myComponent :global(.media-left) {
    vertical-align: middle;
}
于 2016-06-17T20:24:33.687 回答