search

electron-userland / electron-webpack

Scripts and configurations to compile Electron applications using webpack
https://webpack.electron.build/
903 stars 170 forks source link

bootstrap css is loaded after css imported in renderer code #82

Open awesson opened 6 years ago

awesson commented 6 years ago

I am using bootstrap react components with the bootstrap and reactstrap packages.

The packages are working, but my own css which is imported in my renderer typescript files are added before the bootstrap css in the webpack served styles.css file. This makes it so that I can't overwrite any of the bootstrap specified keywords without making them inline styles.

Is there a way to ensure the order that the css files are loaded with a custom webpack config? Or is there a way to update the generated html file so that I can ensure my css gets linked last?

awesson commented 6 years ago

Turns out this is related to https://github.com/webpack/webpack/issues/215, possibly caused by this packages use of extract-text-webpack-plugin.

I was able to work around it by converting my index.css to an index.scss, installing the sass loader, and importing the bootstrap in the index.scss rather than my js entry point:

@import '~bootstrap/dist/css/bootstrap.css'

/// your css classes go here... ///