Feature Request: add a "priority" option to allow defining the order of style blocks about style-loader HOT 9 CLOSED

@pastelsky you can also repeat selectors to increase specificity, i.e. .selector.selector.selector

from style-loader.

I hope I can avoid this. You can enforce the order with the @import statement.

If you want to override bootstrap styles, @import "bootstrap" at the top of your file. This way the correct order is enforced.

from style-loader.

Umm, If I add multiple @import statements to each component, it only includes it several times. I need to have my global styles as top, other orders I don't care.

from style-loader.

@forivall @Ciantic Personally, I think relying on order is a poor and fragile practice - which thus should be avoided. What if you shuffle styles during refactoring? What if you use optimizations such as https://github.com/ben-eb/postcss-merge-idents, https://github.com/ben-eb/postcss-merge-rules and https://github.com/hail2u/node-css-mqpacker ? What if you need to append stylesheets lazily to the dom?
I advice using CSS specificity to override rules instead of relying on a fragile convention. CSS preprocessors (Sass/Less/PostCSS) make it trivial.

from style-loader.

Yes, I had an error, I did my importing in wrong place!

E.g.

import * as React from "react";
import * as ReactDom from "react-dom";
import { Provider } from "react-redux";
import { store, history } from "./State";
// ...
import "./GlobalStyles.scss";

when it should be:

import "./GlobalStyles.scss";
import * as React from "react";
import * as ReactDom from "react-dom";
import { Provider } from "react-redux";
import { store, history } from "./State";
// ...

So my problem was simply fixed by moving the importing of scss in top.

from style-loader.

Closing because it's possible to do this yourself by changing the import order.

from style-loader.

Changing the import order wouldn't help in the case where modules are lazy loaded. A module which is loaded later will insert the style tag below the last one, and override all the styles.

This is more of a problem in development, since in production one usually uses ExtractTextPlugin to concatenate css files in proper order. Using ExtractTextPlugin isn't an option in development mode without losing out on a lot of good stuff.

from style-loader.

@pastelsky I was curious if you found a solution to specify an order for imports. I would essentially like to have certain 3rd party imports be placed at the top, then followed by my application specific imports.

from style-loader.

I'm afraid not @jgornick . In my case, it was just a couple of rules that were not playing well, and I added a !important rule to force them to apply.

This is obviously not a viable solution if you have more rules, plus such workarounds also go into production.

from style-loader.