I have mini-css-extract-plugin that creates the css files from my scss files fine, but it when I load my pages (reactJs app), there are no styles loading. I suspect I am messing up the paths for output or import in some way, but I have tried many combinations unsuccessfully… The paths for import worked fine with the inline style-loader before.
webpack entry:
entry: {
index: './src/index.js',
},
output: {
filename: '[name].js'
},
webpack module:
module: {
rules: [
{
test: /.(sass|less|css|scss)$/,
sideEffects: true,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
{
test: /.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options:{
presets: ['@babel/preset-react']
}
}
],
},
Webpack plugins:
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "css/[id].css",
})
]
mainListing.js (which is one of the React routes inside of index.js):
import './css/index.scss'