css file generated not generated in @import order

[davidrojo]

Hello, I think I am missing something, but when I generate a css file through importing other css files, they are not imported in the order that I've definedm so the styles are not properly overrided.

This is my webpack.config.js

var Encore = require('@symfony/webpack-encore');

let output = 'dev';
if (Encore.isProduction){
    ouput = 'build';
}

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/' + output + '/')
    // the public path used by the web server to access the previous directory
    .setPublicPath('/' + output)
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    // uncomment to create hashed filenames (e.g. app.abc123.css)
    .enableVersioning(true)

    // uncomment to define the assets of the project
    .addEntry('js/app', './assets/js/app.js')
    .addStyleEntry('css/main', './assets/scss/main.scss')

    // uncomment if you use Sass/SCSS files
    .enableSassLoader()

    // uncomment for legacy applications that require $/jQuery as a global variable
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

And this is my main.scss file:

@import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss';
@import "~font-awesome/css/font-awesome.min.css";

@import './alabama/layout.css';
@import './alabama/red.css';

The output main.css file, should have bootstrap, then font awesome, then layout.css and the red.css, but when I open the main.css file generated it has at the begining font awesome, then layout.css then red.css and at the end the bootstrap code.

So, red.css and layout.css can't override bootstrap styles, as bootstrap is being added after them in the resulting css file.

What I am doing wrong?

[weaverryan]

Hey @davidrojo!

The good news is, I don't think you're doing anything wrong :). The bad news is, that this appears to be an old bug in extract-text-webpack-plugin: webpack-contrib/extract-text-webpack-plugin#200. Specifically, the mixing of the scss and css doesn't always result in the correct order.

For now, I think you'll need to workaround the issue - e.g. by using all scss or all css. It appears that, when we're able to upgrade to Webpack v4 (we're waiting on some libraries we depend on to update), that the issue may go away then.

Cheers!

[davidrojo]

HI @weaverryan!

I've changed my files to scss and now they are being imported in the correct order. I will have this in mind in the future.

Thank you very much!

[vladciulley]

I would add that it is also important to explicitly use the file extension when importing the file.
Importing multiple files like this:

// file name on disk is "bootstrap.min.css"
@import '../../node_modules/bootstrap/dist/css/bootstrap.min';  

would result in the same mixed CSS content, even when all imported files are actual CSS files.

[Lyrkan]

@vladciulley Using the extension in that case (if you use the sass-loader) can have some unexpected side-effects though: #283 (comment)