NodeJS 为什么我的webpack配置没有编译我的css?

lmvvr0a8  于 2022-11-29  发布在  Node.js
关注(0)|答案(1)|浏览(149)

我试图通过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
gwbalxhn

gwbalxhn1#

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

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

相关问题