How can I keep the css order in the css file when I use extract-text-webpack-plugin？ #200

cage1618 · 2016-06-24T09:06:36Z

How can I keep the css order in the css file when I use extract-text-webpack-plugin？

// app.js
import '../scss/index.scss';
import AnComponent from './components/AnComponent/index';

// ./components/AnComponent/index.js
import './src/scss/index.scss';

export default class AnComponent Component {
    render() {
        return (
            <div class="component">
               I am a example component
            </div>
        );
    }
}

// ../scss/index.scss
body{
    background-color:red;
}

// ./components/AnComponent/src/scss/index.scss
body{
    background-color:green;
}

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:

FabioAntunes · 2016-08-05T09:51:34Z

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')
}

And then on my browser:

Note: _panels.scss is a bootstrap component

Jessidhia · 2016-08-05T16:31:10Z

Try doing your order-dependent imports in JS, or adding the @imports inside the files that actually depend on those files happening before them. AFAIK, webpack doesn't care about the order dependencies appear in, since the ordering is enforced by the order require calls are encountered; but that has issues with CSS, as it doesn't have a "runtime" order.

Doing as many imports in JS as possible also should help with incremental build performance.

louis-pvs · 2016-09-20T09:18:41Z

I have a workaround but wasn't pretty...

const extractLibStyle = new ExtractTextPlugin("[name].lib.[hash].css");
const extractProjectStyle = new ExtractTextPlugin("[name].[hash].css");

module: {
        loaders: [ { ... }, {
            test: /\.(css|scss|sass)$/,
            loader: extractLibStyle.extract("style-loader", "css-loader!sass-loader?sourceMap"),
            include: [path.resolve(ROOT, "bower_components/"), path.resolve(ROOT, "node_modules/")],
            exclude: path.resolve(ROOT, "app/")
        }, {
            test: /\.(css|scss|sass)$/,
            loader: extractUserStyle.extract("style-loader", "css-loader?localIdentName=[folder]__[local]&modules&importLoaders=1!postcss-loader!sass-loader?sourceMap"),
            include: path.resolve(ROOT, "app/"),
            exclude: [path.resolve(ROOT, "bower_components/"), path.resolve(ROOT, "node_modules/"), path.resolve(ROOT, "build/")]
        }, { ... } ]
    }
}

plugins: [
        extractLibStyle,
        extractProjectStyle,
]

So library styling will come first before my project styling, by using this approach...
Pro

able to seperate out two styling into two file
absolute control of which stylesheet being extracted and insert into <head> tag, even if I purposely require the bower file after my project file like this

// app.js
require("../stylesheets/main.scss");
require("~/bower_components/mdi/scss/materialdesignicons.scss");

output:

<!-- index.html -->
<link href="/app.lib.6c157af1e450e9782aca.css" rel="stylesheet">
<link href="/app.6c157af1e450e9782aca.css" rel="stylesheet">

Con is

there is a lot of writing going on...
more http request, this might be a concern to some people...

Still, hope there is an option to control the order

jhnns · 2016-10-04T00:00:42Z

The order of the extracted text is based on the order of require() calls inside the bundle. If you want to ensure that the output of index.scss is before all the other rules, you need to require("./index.scss") before requiring all the components.

nlitwin · 2016-11-23T08:33:33Z

@jhnns I can get the ordering to work properly if I follow your instructions and put require('./index.scss') before requiring other components, but if I remove { "modules": false } from my .babelrc's es2015 preset, the ordering is wrong again. Any idea on why that would cause it to change?

jhnns · 2016-11-23T13:48:24Z

require() and import() are very different constructs. require() is a regular function and will always execute in the given order. import() is not a function, but syntactic sugar for a native language feature. ES2015 will hoist all imports and resolve them before any code is executed. And babel emulates that behavior by first hoisting all imports and then turning them into require(). That's why your other components will be required first when you remove "modules": false.

wen96 · 2017-01-10T15:23:37Z

Same issue as @FabioAntunes. It sames like, when you @import from .css and SASS files, it keep order between css and scss but not both together. For example:

// main.scss

// It works
@import "../../node_modules/bootstrap/dist/css/bootstrap.css";
@import "../../node_modules/admin-lte/dist/css/AdminLTE.css";

// Wrong order
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../../node_modules/admin-lte/dist/css/AdminLTE.css";

@FabioAntunes have you find any solution to this?

FabioAntunes · 2017-01-10T15:32:32Z

@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.

Gtosta96 · 2017-02-07T18:56:54Z

someone have solutions for this one?

secondstreetmedia · 2017-03-10T02:54:08Z

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 extract-text-webpack-plugin rather than all of them. Once I ensured all of them utilized the plugin, my styles were loading consistently in the order I wanted them to, at least in development. (See my more detailed response here: webpack/webpack#215). Note: I used require statements.

config (original)

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
},
{
  test: /\.*(sass|scss)$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader']
  })
},

config (revised)

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader']
  })
},
{
  test: /\.*(sass|scss)$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader']
  })
},

bebraw · 2017-05-06T07:21:57Z

Can someone provide a standalone example illustrating this issue? That would help a lot. Thanks.

ben-yocum · 2017-06-23T20:39:05Z

I had the same issue as @wen96: load order isn't respected with mixed css and scss.

julkue · 2017-09-11T22:21:44Z

@bebraw You can reproduce it in my repository here. The normalize.css is generated after the other required components.

Relative issues I've found:

felschr · 2018-02-22T12:58:47Z

I'm using @imports in my css files (without using CSS modules) and I'm experiencing this issue.
Moving the imports to js didn't change anything about that.

Is this really still and issue? Am I missing something?

alexander-akait · 2018-02-22T13:40:12Z

@felschr bug exists, feel free to PR

pbarbiero · 2018-02-22T17:08:49Z

This started happening for me with webpack 3.11.0, 3.10.0 does NOT exhibit this issue.

gtournie · 2018-02-27T08:45:31Z

@vincent-louis I did the same but I used the file-merge-webpack-plugin to get only css file at the end (it messes up the source map tho...)

This is a real issue in my case. I import Bootstrap via css-modules (with reactstrap) and have also some custom stylesheets:

import bs from 'bootstrap'
import styles from './styles'
[...]
  <div styleName="bs.bg-primary styles.bg"></div>

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:

{ test: ..., loader: ExtractTextPlugin.extract({ use: ..., priority: 1 }) }, // Bootstrap
{ test: ..., loader: ExtractTextPlugin.extract({ use: ..., priority: 2 }) }, // App

sherlock1982 · 2018-03-02T12:33:51Z

Started to happen for me in Webpack 4.0.1.

th3fallen · 2018-03-13T15:28:44Z

im still getting this on 3.0.2 anyone know a fix for it, it is maddening

pboos · 2018-03-21T00:58:11Z

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:

-        "extract-text-webpack-plugin": "3.0.2",
+        "extract-text-webpack-plugin": "4.0.0-beta.0",

-        "css-loader": "0.28.9",
+        "css-loader": "0.28.11",

-        "sass-loader": "6.0.6",
+        "sass-loader": "6.0.7",

-        "webpack": "3.10.0",
+        "webpack": "4.1.1"

Not exactly know whose fault it is. But something is getting messed up. Wondering if I should switch back to webpack 3.10.0.

sherlock1982 · 2018-03-21T05:10:48Z

I swtiched to mini-css-extract-plugin and the order is ok now. Looks like extract-text-webpack-plugin will be left for Webpack3

pboos · 2018-03-21T08:11:39Z

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)

luojianet · 2018-04-08T13:11:58Z

Here's a solution

@bebraw issue reproduce code
use extract-text-webpack-plugin webpack plugin.

write like this, can not keep css order.

import "../css/normalize.css";
import "../css/animate.css";
import "../css/style.css";

----------------------splite line----------------------

you can write like this.

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)

ghost · 2018-06-21T12:24:09Z

I wasn't able to fix the issue with any suggestion until I moved to mini-css-extract-plugin and now it works like a charm. If anyone's having trouble you should give that plugin a try.

julkue · 2018-08-02T09:01:34Z

Could fix it finally by switching to https://github.com/webpack-contrib/mini-css-extract-plugin

alexander-akait · 2018-08-02T09:03:29Z

@julmot PR welcome

x-yuri · 2018-09-17T17:05:10Z

I can't reproduce it. See this post.

zacherkkila · 2018-10-11T19:20:38Z

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

@import "./bootstrap.min.css";
@import "./common.css"

Results in common.css above bootstrap.css

However,

@import "./bootstrap.css";
@import "./common.css"

Results in the correct order.

I can consistenly make this happen just by having a ".something" in the filename

@import "./test.awesome.css";
@import "./common.css"

and

@import "./test.css";
@import "./common.css"

Has the same result

I just renamed the files in my program but that would be a place to look

x-yuri · 2018-10-11T23:42:06Z

@zacherkkila I tried to reproduce it but failed (branch double-extension). Can you help us figure out how to reproduce it? Like, an archive or repository with an example (preferably simple) that reproduces the issue?

zacherkkila · 2018-10-12T02:24:49Z

@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

alexander-akait · 2019-05-29T12:02:59Z

DEPRECATED
Please use: https://github.com/webpack-contrib/mini-css-extract-plugin

jhnns mentioned this issue Oct 3, 2016

An order of required styles is wrong. #165

Closed

jhnns mentioned this issue Oct 4, 2016

Duplicate Imports webpack-contrib/sass-loader#145

Closed

bebraw added the type: Bug label Jan 28, 2017

This was referenced Feb 1, 2017

wrong button and form layout color on prod basti1302/elm-lang-de#12

Closed

Wrong font size basti1302/elm-lang-de#14

Closed

Timer mentioned this issue Feb 27, 2017

Bugs in extract-text-webpack-plugin facebook/create-react-app#1668

Closed

3 tasks

jhnns mentioned this issue Mar 20, 2017

Imports Out of Order in Output webpack-contrib/less-loader#57

Closed

rizedr mentioned this issue Mar 29, 2017

Discussion about Styled Components Semantic-Org/Semantic-UI-React#1526

Closed

joshwiens self-assigned this Apr 19, 2017

joshwiens added priority: 1 (critical) severity: 3 (broken) labels Apr 19, 2017

joshwiens removed their assignment May 2, 2017

julkue mentioned this issue Sep 26, 2017

CSS resolving order webpack/webpack#215

Closed

scriptPilot mentioned this issue Nov 3, 2017

Framework7 IOS/Material theme CSS is appended to head of document after components CSS scriptPilot/app-framework#708

Closed

timneutkens mentioned this issue Feb 16, 2018

Trouble with order of styles in output file vercel/next-plugins#59

Closed

choyongjoon mentioned this issue Mar 27, 2018

How can I keep the css order in the css file when I use mini-css-extract-plugin？ webpack-contrib/mini-css-extract-plugin#58

Closed

weaverryan mentioned this issue Mar 31, 2018

css file generated not generated in @import order symfony/webpack-encore#292

Closed

montehurd mentioned this issue May 5, 2018

Second attempt to fix CSS regression. wikimedia/wikimedia-page-library#138

Merged

VeeeneX mentioned this issue Sep 8, 2018

Bootstrap 4, CSS Selector order vercel/next.js#5121

Closed

spefley mentioned this issue Oct 3, 2018

CSS ordering conflict with DatePicker month/year choosers palantir/blueprint#2952

Open

alexander-akait closed this as completed May 29, 2019

This was referenced Jun 20, 2019

css order hexylena/jbrowse-dark-theme#1

Open

Css order GMOD/jbrowse#1384

Closed

flohhhh mentioned this issue Dec 7, 2021

fix: Correct colors about Alerter buttons cozy/cozy-ui#1989

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can I keep the css order in the css file when I use extract-text-webpack-plugin？ #200

How can I keep the css order in the css file when I use extract-text-webpack-plugin？ #200

cage1618 commented Jun 24, 2016

FabioAntunes commented Aug 5, 2016

Jessidhia commented Aug 5, 2016

louis-pvs commented Sep 20, 2016

jhnns commented Oct 4, 2016

nlitwin commented Nov 23, 2016

jhnns commented Nov 23, 2016

wen96 commented Jan 10, 2017

FabioAntunes commented Jan 10, 2017

Gtosta96 commented Feb 7, 2017

secondstreetmedia commented Mar 10, 2017 •

edited

Loading

bebraw commented May 6, 2017

ben-yocum commented Jun 23, 2017

julkue commented Sep 11, 2017

felschr commented Feb 22, 2018

alexander-akait commented Feb 22, 2018

pbarbiero commented Feb 22, 2018

gtournie commented Feb 27, 2018

sherlock1982 commented Mar 2, 2018

th3fallen commented Mar 13, 2018

pboos commented Mar 21, 2018 •

edited

Loading

sherlock1982 commented Mar 21, 2018

pboos commented Mar 21, 2018

luojianet commented Apr 8, 2018 •

edited

Loading

ghost commented Jun 21, 2018

julkue commented Aug 2, 2018

alexander-akait commented Aug 2, 2018

x-yuri commented Sep 17, 2018

zacherkkila commented Oct 11, 2018 •

edited

Loading

x-yuri commented Oct 11, 2018 •

edited

Loading

zacherkkila commented Oct 12, 2018 •

edited

Loading

alexander-akait commented May 29, 2019

How can I keep the css order in the css file when I use extract-text-webpack-plugin？ #200

How can I keep the css order in the css file when I use extract-text-webpack-plugin？ #200

Comments

cage1618 commented Jun 24, 2016

FabioAntunes commented Aug 5, 2016

Jessidhia commented Aug 5, 2016

louis-pvs commented Sep 20, 2016

jhnns commented Oct 4, 2016

nlitwin commented Nov 23, 2016

jhnns commented Nov 23, 2016

wen96 commented Jan 10, 2017

FabioAntunes commented Jan 10, 2017

Gtosta96 commented Feb 7, 2017

secondstreetmedia commented Mar 10, 2017 • edited Loading

bebraw commented May 6, 2017

ben-yocum commented Jun 23, 2017

julkue commented Sep 11, 2017

felschr commented Feb 22, 2018

alexander-akait commented Feb 22, 2018

pbarbiero commented Feb 22, 2018

gtournie commented Feb 27, 2018

sherlock1982 commented Mar 2, 2018

th3fallen commented Mar 13, 2018

pboos commented Mar 21, 2018 • edited Loading

sherlock1982 commented Mar 21, 2018

pboos commented Mar 21, 2018

luojianet commented Apr 8, 2018 • edited Loading

Here's a solution

ghost commented Jun 21, 2018

julkue commented Aug 2, 2018

alexander-akait commented Aug 2, 2018

x-yuri commented Sep 17, 2018

zacherkkila commented Oct 11, 2018 • edited Loading

x-yuri commented Oct 11, 2018 • edited Loading

zacherkkila commented Oct 12, 2018 • edited Loading

alexander-akait commented May 29, 2019

secondstreetmedia commented Mar 10, 2017 •

edited

Loading

pboos commented Mar 21, 2018 •

edited

Loading

luojianet commented Apr 8, 2018 •

edited

Loading

zacherkkila commented Oct 11, 2018 •

edited

Loading

x-yuri commented Oct 11, 2018 •

edited

Loading

zacherkkila commented Oct 12, 2018 •

edited

Loading