Webpack 4 with Less and MiniCssExtractPlugin using entries
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
Rafal Cypcer
Updated on June 04, 2022Comments
-
Rafal Cypcer almost 2 years
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.