SOLVED: Incorrect CSS import order

EDIT SOLUTION: It’s simply because the base styling is imported after routes in the main.js file and therefore overrides the css imported with the components.

Hi, it seems that the css is being built in the wrong order. My understanding would be that base.css should be at the top of the stylesheet and then any other css in the components would be at the bottom, overriding the top. Any easy way to test this is to add this line to style.css in the login folder

h1{
    color: #00FF00;
}

It should override to the new color, but it actually stays its original color.

We can see that this style has been applied to the heading, but the css in base.css has overriden it. I had this issue in my project when trying to import bootstrap, and everything was in reverse order of where I wanted it to be. I found this issue had always been in the project by going back to an empty essential-react project.

I have spent many hours trying to debug this while also trying to learn webpack.

Edit: The below issues were different and led me on the wrong path to trying to fix it I have seen this issue in many places, but have not been able to fix it from these, despite trying to disable extract-text-webpack, etc. https://github.com/webpack/extract-text-webpack-plugin/issues/57 https://github.com/webpack/webpack/issues/215

[scottanglr]

I solved it by moving the import statement for the base styling import './common/base.css'; BEFORE the import statement for Routes import Routes from './common/components/Routes';.

[Memoyr]

an another specification : you also need use import instead of require() statement thanks so much!