Closed ghost closed 8 years ago
Hello, pathogen. It's not have problem because any components located in different folders and have one style scss file. If the problem is serious, can you show more example of this issue? :)
Sorry, yes, I didn't mean to call it a 'problem' so much as just a suggestion (but it was very late at night :sleeping:)
What I meant was that with a small change to the webpack css-loader config we can have several local CSS classes in a module, and just a lot more flexibility for declaring the CSS in the associated scss file.
Currently each scss file can only have a single
:local(.class) { ... }
...which will output:
.src-components-Component- { ... }
If we try to have more than a single :local css selector:
:local(.class) { ... }
:local(.anotherClass) { ... }
...this is the output:
.src-components-Component- { ... } .src-components-Component- { ... }
Whereas by including at least the [local] to the webpack css-loader config (eg. loader: 'style!css?localIdentName=[path][local]) we get this output for instance:
.src-components-Component-class .src-components-Component-anotherClass
I have already done this on my local version of the boilerplate, but I just thought it might be helpful for others to have the possibility to declare their CSS their way and for it to 'just work' :smile:
Thanks for big comment! But i think next code better for any components:
:local(.styles) {
position: relative;
.class {
background: red;
}
.anotherClass {
background: blue;
}
}
import { styles } from './styles.scss';
render() {
return (
<div style={style}> // pos - relative
<div className="class"></div> // - background red
<div className="anotherClass"></div> // background blue
</div>
)
}
Pathogen you are right! I'm will fix this because it can be useful. But i wll add only "local" (local variables unique)
Currently there can be only one locally scoped CSS class in a module because the webpack css-loader is set up to only create names based on the path:
If webpack css-loader was set up in the following way each locally scoped class is given it's own name (plus globally unique hash etc.).
As per the css-loader documentation