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

Question

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?

Grgur · Accepted Answer · 2016-06-17 20:18:32Z

2

You can have one loader for bootstrap and the other for the rest of your css, based on test config.

On another note, the modules part of your css-loader config is responsible random class names. You can use localIdentName config to format generated classnames to your liking.

answered Jun 17, 2016 at 20:18

Grgur

7,4122 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevin · Accepted Answer · 2016-06-17 20:24:33Z

1

So I figured this out. I need to use the global selector for every class that I want to remain global, something like this:

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

answered Jun 17, 2016 at 20:24

Kevin

25.3k20 gold badges107 silver badges159 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related