Why is my webpack config not compiling my css? - css

Question

i am trying to compile my css via webpack, it gives me a succes on my javascript file but doesnt say anything about my css file
this is my webpack config
`import path from 'path';
import webpack from 'webpack';
import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
import loader from 'sass-loader';
const extractSASS = new MiniCssExtractPlugin.default({filename: "app.min.css"});
const jQuery = new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
});
export default {
mode: "production",
entry: {
main: [
"./src/js/index.js"
],
},
output: {
filename: "app.min.js",
path: path.resolve("./../wwwroot/dist")
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
],
test: /\.scss$/,
use: [
{
loader: "postcss-loader",
options: {
config: {
path: path.resolve(import.meta.url, "postcss.config.js")
}
}
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(png|jpe?g|gif)$/,
use: "file-loader?name=images/[name].[contenthash].[ext]"
}
]
},
plugins: [
extractSASS,
jQuery
]
};`
this is the output of npm run build
npm run build
> cms3#1.0.0 build
> webpack --mode=production
asset app.min.js 169 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 500 bytes 2 modules
cacheable modules 504 KiB
./src/js/index.js 88 bytes [built] [code generated]
./node_modules/bootstrap/dist/js/bootstrap.js 134 KiB [built] [code generated]
./node_modules/jquery/dist/jquery.js 283 KiB [built] [code generated]
./node_modules/popper.js/dist/esm/popper.js 86.4 KiB [built] [code generated]
webpack 5.75.0 compiled successfully in 3469 ms

Answer 1

Most likely webpack thinks that no CSS files are needed in your build.
You need to tell webpack by adding an import line in your index.js file:
import "./path/to/my.scss";