Current Result
- SimpleBar
- Bootstrap
- Main
Desired Result
- Bootstrap
- SimpleBar
- Main
It seems that the ".css" files are bundled first.
webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/scripts/app.js',
output: {
filename: 'scripts/app.js'
},
plugins: [
new MiniCssExtractPlugin({
filename: 'styles/app.css'
})
],
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'autoprefixer'
]
},
sourceMap: true
}
},
{
loader: 'resolve-url-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(eot|otf|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts',
publicPath: '../fonts'
}
}
]
}
]
},
watch: true
};
src/scripts/app.js
import '../styles/app.scss';
src/styles/app.scss
@import '~bootstrap/scss/bootstrap';
@import '~simplebar/dist/simplebar.css';
@import 'main';
Please note that "SimpleBar" doesn't come with a ".scss" file which will fix the problem. I also don't want to rename the ".css" file from the "node_modules" directory.
"devDependencies": {
"autoprefixer": "^9.8.6",
"css-loader": "^4.3.0",
"file-loader": "^6.1.0",
"mini-css-extract-plugin": "^0.11.1",
"postcss": "^7.0.32",
"postcss-loader": "^4.0.1",
"resolve-url-loader": "^3.1.1",
"sass": "^1.26.10",
"sass-loader": "^10.0.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
#1 Solution (I don't really like it)
src/scripts/app.js
import '../styles/vendor.scss'; // Bootstrap and other goodies
import 'simplebar/dist/simplebar.css';
import '../styles/main.scss';