Webpack 4 with Less and MiniCssExtractPlugin using entries

Question

I have following structure for styles in my application:

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

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",
}

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.

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.

Thanks

Rafal

PS: Similar issue is reported here.

Epictetus

if you just do import "../bootstrap/bootstrap.less", does it break? – Cryptomeria

thanks, but I'm getting the same error unfortunately... – Epictetus

Answer 1

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.

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

npm install url-loader --save-dev

and add configuration as below:

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

Thanks

Rafal

Epictetus

Thanks, that worked for me! Adding the test and use for url-loader is all I had to change in the config file. I used regex: test: /\.(woff|woff2|ttf|eot|svg)($|\?)/, instead. – Wheelhorse