How to Import Styles in The Right Order in Webpack

How to import styles in the right order in webpack

The problem is that I have to use the ExtractTextPlugin plugin also for the css part in my loader settings:

{
  test: /\.less$/,
  loader: ExtractTextPlugin.extract(
    'css?sourceMap!' +
    'less?sourceMap'
  )
}, 
{
  test: /\.css$/,
  loader: ExtractTextPlugin.extract(
    'css'
  )
},

Webpack doesn't respect import order

Can you try importing Bootstrap from within your creative.css file? I think that will allow Webpack to get the order right, whereas when using import in JS to import CSS it doesn't define any strict order.

E.g.

index.js

import './css/creative.css'

creative.css

@import url('./bootstrap.css');
...your custom css...

Rearrange style order in ccs bundle

After a while i stumbled over a new css framework postcss they have all kinds of plugins, and with this configuration I got it to work:

{
                test: /\.css$/,
                use: [ 
                    'style-loader',
                    { loader: 'css-loader', options: { modules: true, importLoaders: 1 }, 
                     loader: 'postcss-loader', 
                    },
                ]
            },
            {    test: /\.less$/,
                use: extractLESS.extract(
                    {fallback:'style-loader', use: ['css-loader', 'less-loader']}
                )
            },

Here are some resources that helped:

https://github.com/postcss/postcss

https://webdesign.tutsplus.com/tutorials/using-postcss-together-with-sass-stylus-or-less--cms-24591

https://github.com/Crunch/postcss-less

SCSS @import's processing order with webpack

Ok, I admit that the question itself is quite complex. So I ended up with multiple changes across the project and here is at least one chunk of config which makes sense for me:

autoprefixer-loader?safe=true

should be replaced with

postcss

in the webpack.config.js file and accordingly installed via npm. In current case I fixed an issue with @imports, but the question regarding the best way to customize scss structure so that any layout encapsulates styling for layout and each component has it's own styling for itself. Will play around but would be great to hear any suggestions.

---

Related Topics