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 @import
s, 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
Horizontal Submenu for a Vertical Main Menu Using Bootstrap
Resize Images as Viewport Resizes Without Sides Being Cut Off
Tab Box CSS for Shinydashboard
Ionic Item with Left and Right Aligned Text
CSS Issue Ngx-Table Angular2 Swimlane
How to Gzip @Font-Face Example
Flex-Basis: Webkit/Blink Ignore Intrinsic Aspect Ratio
Angular [Class.Active]="Isactive" - What Does "Class.Active" Mean Here
Wicked_Pdf Stylesheet Not Working on Heroku
Page Styles Break When I Change Styles in Chrome Devtools with Webpack Hmr
Large Iconfont Icon Cut Off on The Right Side
Is There a Way (Or a Plugin) to Make Vim Generate a Code Outline for CSS
How to Make Rounded Tabs with CSS
How to Resolve The CSS Warnings for Browser Specific Selectors in Bootstrap 3