I’m using semantic-ui with less and postcss (+ autoprefixer) plugin.
I have the semantic files in /client/lib/semantic-ui so the build system automatically grabs those less files as source files, feeds them through minification, and attaches them as an external stylesheet.
However, when I make my own less stylesheets alongside my react components inside imports/ui/... those less files aren’t grabbed like the semantic files are, so I import them from within the react component like so: import './component_style.less'
According to the docs, this imported style gets attached in an internal stylesheet within the document’s head, and I can confirm that meteor does this.
The problem I’m facing is that the styles I import get overridden by the styles from semantic, even though they’re coming from an external minified sheet. I can get around this if I just tack on !important to every single style, but I’d like to know if there’s a better way to go about this.
Anybody have any suggestions?
*Edit
Actually, I noticed that the file semantic.less.css is getting loaded as well (you can see it in the screenshot) but I have no idea where meteor does this. I tried moving my own .less stylesheet into the lib folder as well, but that file semantic.less.css is given precedence. It’s weird cuz all other styles in the chrome dev tools have references to .less files, while this one is a reference to an actual .css file.