Question

首先，我想说我也遇到过同样的问题，但我不能赞扬也不能发表评论，说我也有同样的需求。因此，它显然是How to use Webpack 4 to compile Sass files properly?

的副本

我只是想使用Webpack将一些sass文件编译成css文件。但是webpack会创建一些与css文件同名的无用js文件。

文件夹结构：

--dist
--src
    |--a
        |--editor.scss
        |--style.scss
    |--b
        |--editor.scss
        |--style.scss

和我的依赖项（package.json）

"devDependencies": {
    "webpack": "latest",
    "webpack-cli": "latest",
    "css-loader": "latest",
    "sass-loader": "latest",
    "node-sass": "latest",
    "mini-css-extract-plugin": "latest"
}

这是我已经设置的配置（webpack.config.js）：

const path = require("path");
const context = path.resolve(__dirname);
const output = context + "/dist";
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const entries = {
    "/dist/a/editor": "./src/a/editor.scss",
    "/dist/a/style": "./src/a/style.scss",
    "/dist/b/editor": "./src/b/editor.scss",
    "/dist/b/style": "./src/b/style.scss"
};

module.exports = {
    context: context,
    entry: entries,
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "[name].css"
        })
    ],
    output: {
        path: output
        //     // publicPath: distBlocks,
        //     // filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }
};

实际结果：

--dist
    |--a
        |--editor.css
        |--editor.js
        |--style.css
        |--style.js
    |--b
        |--editor.css
        |--editor.js
        |--style.css
        |--style.js
--src
    |--a
        |--editor.scss
        |--style.scss
    |--b
        |--editor.scss
        |--style.scss

预期结果是相同的，没有那些无用的js文件...

因此，应该如何将webpack配置为仅从css获取css文件而不从js文件？

更新：解决方法：webpack-fix-style-only-entries
webpack.config.js

...
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
...
Module.exports = {
    ...
    plugins: [
        new FixStyleOnlyEntriesPlugin(),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "[name].css"
        })
    ],
    ...

有一个修复程序，但仅当正确理解webpack git时才适用于Webpack的未来版本（^ 5）

Webpack将Sass编译为CSS文件问题

0 个答案: