Hello,
I’ve been struggling with an issue but I’ve finally solved it. I’m including the problem description and a solution for Sage users.
Let’s say I’m using Bootstrap Sass because I do CSS in Sass. I’m also using Bootstrap Material Design. However, I want to change the primary color of Material Design, so I use bower to install it as a package. Combining Less and Sass? No problem with Sage! In assets/styles
folder I create two files: main.less
and main.scss
.
In main.scss
, I include Bootstrap Sass _bootstrap.scss
file from bower_components and then other .scss
files. In main.less
, I include material.less
from bower_components and then change the color scheme (not important for this issue).
After that, I put both of these files in my manifest.json
as:
"main.css": {
"files": ["styles/main.less", "styles/main.scss"]
}
Running the gulp
(gulp styles
) task, styles gets concatenated in this order:
- Bootstrap
- My style modifications
- Bootstrap Material Design
(= main.scss
before main.less
)
Material Design styles have to be included after Bootstrap styles and for this it works correctly. But there is a problem…
The problem
From the list above, we can see that Boostrap Material Design style definitions overwrite my style modifications. For example:
// my styles, I want it to be red
body {
background-color: red;
}
// styles of material design
body {
background-color: #eee;
}
// the final concatenated main.css styles
body {
background-color: #eee;
}
To fix this, I could write background-color: red !important;
but that’s not good, styles should be included in a better order. Therefore, I used gulp-order library and put
// gulpfile.js
// some code of cssTasks function
.pipe($.order, ['**/*'])
.pipe($.concat, filename)
// some more code
in the gulpfile.js
in the cssTasks
function.
['**/*']
will order files by in the alphabetical order. The last thing to do is to properly prefix your style files, for example:
// assets/styles
10_bootstrap.scss
20_material-design-bootstrap.less
30_main.scss
In the first file, I import the Bootstrap main file. In the second one, I import the Material Design main file and redefine the primary color scheme variable. In the last file, all of my style modifications are imported. Put all of these files in the manifest.json
file and main.css
will be concatenated in the proper order.