使用条目使用Less和MiniCssExtractPlugin的Webpack 4

问题描述

我在应用程序中具有以下样式结构:

I have following structure for styles in my application:

应用

- css/
   - bootstrap/
      - boostrap.less -> has (@import "another.less")
      - another.less
   - common/
      - common.less
   - entries/
      - bootstrap.js -> has (import style from "../bootstrap/bootstrap.less")
      - common.js -> has (import common from "../common/common.less")

现在，我需要从导入到条目bootstrap.js和common.js的样式创建单独的CSS-es.

And now I need to create separate CSS-es from styles imported to entries bootstrap.js and common.js.

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
    entry: {
        "boostrap": ["./css/entries/boostrap.js"]
    },
    module: {
        rules: [
            {
                test: /\.(less)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "./css/[name].css"
        })
    ]
}

package.json

{
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "css-loader": "^1.0.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.1",
}

当我运行webpack时，出现以下错误:

When I run webpack I get error below:

Entrypoint boostrap = boostrap.js
    [0] multi ./css/entries/boostrap.js 28 bytes {0} [built]
    [1] ./css/entries/boostrap.js 48 bytes {0} [built]
    [2] ./css/bootstrap/bootstrap.less 1.41 KiB {0} [built] [failed] [1 error]

    ERROR in ./css/bootstrap/bootstrap.less
    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    ModuleParseError: Module parse failed: Unexpected character ' ' (1:0)
    You may need an appropriate loader to handle this file type.

您知道什么地方出了问题吗?看起来 bootstrap.less 在导入其他较少文件时抛出错误，但我不知道为什么.

Do you have any idea what's wrong? It looks like bootstrap.less thrown an error during import other less file, but I don't know why.

谢谢

Rafal

PS:此处报道了类似的问题.

PS: Similar issue is reported here.

推荐答案

我找到了原因.结果证明我的 boostrap.less 引用了 glyphicons.less.Glyphicons导入用于扩展的字体:* .eot，*.woff2，*.woff，*.ttf和* .svg，这是我缺少的部分.

I found the reason. It turned out that my boostrap.less had reference to glyphicons.less. Glyphicons imports fonts for extensions: *.eot, *.woff2, *.woff, *.ttf and *.svg and that was my missing part.

文件加载器或 url加载器是两个可能的选项.我去了后者:

file-loader or url-loader are two possible options. I went for the latter:

并添加如下配置:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
    entry: {
        "boostrap": ["./css/entries/boostrap.js"]
    },
    module: {
        rules: [
            {
                test: /\.(less)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader"
                ]
            },
            {
                test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
                use: "url-loader"
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "./css/[name].css"
        })
    ]
}

谢谢

Rafal

这篇关于使用条目使用Less和MiniCssExtractPlugin的Webpack 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！