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.
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