为什么我的webpack配置不编译我的css?

Question

我正试图通过webpack编译我的CSS，它给了我一个成功的javascript文件，但没有说任何关于我的CSS文件

这是我的webpack配置

`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
]
};`

这是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

很可能webpack认为在你的构建中不需要CSS文件。你需要通过在index.js文件中添加一个导入行来告诉webpack:

import "./path/to/my.scss";