web-dev-qa-db-ja.com

エントリを使用したLessおよびMiniCssExtractPluginを備えたWebpack4

アプリケーションのスタイルには、次の構造があります。

アプリケーション

- 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を作成する必要があります。

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を実行すると、以下のエラーが発生します。

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が他の少ないファイルのインポート中にエラーをスローしたようですが、理由はわかりません。

ありがとう

ラファール

PS：同様の問題が報告されています ここ 。

webpacklesswebpack-style-loaderwebpack-4mini-css-extract-plugin
4
Rafal Cypcer

私はその理由を見つけました。私のboostrap.lessはglyphicons.lessを参照していることがわかりました。 Glyphiconsは拡張機能のフォントをインポートします：*。eot、*。woff2、*。woff、*。ttf、*。svgそしてそれは私の欠けていた部分でした。

file-loaderまたはurl-loaderは2つの可能なオプションです。私は後者に行きました：

npm install url-loader --save-dev

以下のように構成を追加します。

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"
        })
    ]
}

ありがとう

ラファール

4
Rafal Cypcer