-
Notifications
You must be signed in to change notification settings - Fork 517
How can I keep the css order in the css file when I use extract-text-webpack-plugin? #200
Comments
Same problem here, my sass file: $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
@import "~angular-ui-grid/ui-grid.css";
@import "~angular-ui-select/select.css";
@import "~startbootstrap-sb-admin-2/dist/css/sb-admin-2.css";
@import "dashboard";
@import "editable-grid";
@import "flash-msgs";
@import "manual-link";
@import "popular";
@import "product-list";
@import "sidebar";
@import "slider";
@import "widgets"; My webpack config: {
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss-loader!sass?sourceMap')
} Note: _panels.scss is a bootstrap component |
Try doing your order-dependent imports in JS, or adding the Doing as many imports in JS as possible also should help with incremental build performance. |
I have a workaround but wasn't pretty...
So library styling will come first before my project styling, by using this approach...
output:
Con is
Still, hope there is an option to control the order |
The order of the extracted text is based on the order of |
@jhnns I can get the ordering to work properly if I follow your instructions and put |
|
Same issue as @FabioAntunes. It sames like, when you
@FabioAntunes have you find any solution to this? |
@wen96 Not really, I had to re-write the rules on my scss, fortunately they were just a couple, which might not be your case. |
someone have solutions for this one? |
It's difficult to tell from the code snippets posted above if this will help others, but my issue was that I only had some of my styling related loaders utilizing the config (original)
config (revised)
|
Can someone provide a standalone example illustrating this issue? That would help a lot. Thanks. |
I had the same issue as @wen96: load order isn't respected with mixed css and scss. |
I'm using Is this really still and issue? Am I missing something? |
@felschr bug exists, feel free to PR |
This started happening for me with webpack 3.11.0, 3.10.0 does NOT exhibit this issue. |
@vincent-louis I did the same but I used the This is a real issue in my case. I import Bootstrap via css-modules (with reactstrap) and have also some custom stylesheets:
For now there is no way to ensure that all bootstrap styles will be placed first. The only workaround is to use 2 ExtractTextWebpackPlugin instances and to generate 2 css files. It would be nice to have a priority option, like:
|
Started to happen for me in Webpack 4.0.1. |
im still getting this on 3.0.2 anyone know a fix for it, it is maddening |
Just upgraded to Webpack 4.1.1 and this is happening to me it seems. Strange thing: It changes the order depending on the build. Sometimes it is ok. Sometimes it is wrong. So ordering seems random? Changes:
Not exactly know whose fault it is. But something is getting messed up. Wondering if I should switch back to webpack 3.10.0. |
I swtiched to mini-css-extract-plugin and the order is ok now. Looks like extract-text-webpack-plugin will be left for Webpack3 |
As @sherlock1982 said, extract-text-webpack-plugin is for webpack3 and older (will not support webpack 4 it seems). They say to move to mini-css-extract-plugin. For more information see here: #701 (comment) |
Here's a solution@bebraw issue reproduce code
import "../css/normalize.css";
import "../css/animate.css";
import "../css/style.css"; ----------------------splite line----------------------
import "../css/first.css"; /*first.css*/
@import url(normalize.css);
@import url(animate.css);
@import url(style.css); |
Use `mini-css-extract-plugin` instead of `extract-text-webpack-plugin`. "How can I keep the css order in the css file when I use extract-text-webpack-plugin" "TL;DR Use mini-css-extract-plugin instead" webpack-contrib/extract-text-webpack-plugin#200 webpack-contrib/extract-text-webpack-plugin#200 (comment) webpack-contrib/extract-text-webpack-plugin#701 (comment)
I wasn't able to fix the issue with any suggestion until I moved to |
Could fix it finally by switching to https://github.com/webpack-contrib/mini-css-extract-plugin |
@julmot PR welcome |
I can't reproduce it. See this post. |
It seems like there are multiple issues here but just for anyone out there that might have the same issue as me.. I get this problem anytime I have a "." in the file name. This seems to push it to the bottom of the import list For example
Results in However,
Results in the correct order. I can consistenly make this happen just by having a ".something" in the filename
and
Has the same result I just renamed the files in my program but that would be a place to look |
@zacherkkila I tried to reproduce it but failed (branch |
@x-yuri I am realizing after looking at your example that the project I am on is using an old version of the extract text plugin and I should be switching over to the mini-css-extract-plugin as mentioned in a few earlier comments. I haven't tested yet but I am guessing that will solve the issue. If for some reason I still have problems I will try to get something reproducible. Sorry for the time waste but thanks for pointing me in the right direction on that |
DEPRECATED |
How can I keep the css order in the css file when I use extract-text-webpack-plugin?
How can ensure
./scss/index.scss
is before./components/AnComponent/src/scss/index.scss
in the output css file when I use extract-text-webpack-plugin?The text was updated successfully, but these errors were encountered: