webpack 4, bundle glyphicons - css

Question

I have issues understanding how to bundle glyphicons using webpack.
Here is my webpack file
module.exports = {
context: path.join(__dirname, "app"),
devtool: 'source-map',
entry: {
main: ["./main.coffee"],
vendor: ["./vendor.coffee"]
},
resolve: {
extensions: [".coffee", ".js", ".json", ".css", ".less", ".html"]
},
output: {
path: path.join(__dirname, 'wwwroot'),
filename: '[name].js',
chunkFilename: '[id].chunk.js',
},
module: {
rules: [
{
test: /\.coffee$/,
use: ['coffee-loader'],
exclude: /node_modules/
},
{
test: /\.less$/i,
use: css.extract({
fallback: "style-loader",
use: ['css-loader', 'less-loader']
}),
exclude: /node_modules/
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
]
},
plugins: [
css,
new cleanWebpackPlugin(["./wwwroot"])
],
optimization: {
splitChunks: {
minSize: 2,
name: true
}
}
}
here is the output I get from webpack
Child extract-text-webpack-plugin ../node_modules/extract-text-webpack-plugin/dist ../node_modules/css-loader/index.js!../node_modules/less-loader/dist/cjs.js!app.less:
[0] ../Content/fonts/glyphicons-halflings-regular.eot 26.5 KiB {0} [built]
[1] ../Content/images/nice_snow.png 23.9 KiB {0} [built]
[2] ../Content/fonts/glyphicons-halflings-regular.svg 82.2 KiB {0} [built]
[3] ../Content/fonts/glyphicons-halflings-regular.ttf 53.7 KiB {0} [built]
[4] ../Content/fonts/glyphicons-halflings-regular.woff 30.4 KiB {0} [built]
[7] ../node_modules/css-loader!../node_modules/less-loader/dist/cjs.js!./app.less 139 KiB {0} [built]
+ 2 hidden modules
here is how i import glyphicons (it resolves path fine, you can tell by webpack output message)
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../#{icon-font-path}#{icon-font-name}.eot');
src: url('../#{icon-font-path}#{icon-font-name}.eot?#iefix') format('embedded-opentype'),
url('../#{icon-font-path}#{icon-font-name}.woff') format('woff'),
url('../#{icon-font-path}#{icon-font-name}.ttf') format('truetype'),
url('../#{icon-font-path}#{icon-font-name}.svg#glyphicons-halflingsregular') format('svg');
}
Finally here is a folder structure i get for the output
- wwwroot
1. app.css
2. app.css.map
3. main.js
4. main.js.map
5. vendor.js
6. vendor.js.map
Now, everything working as expected. all java script is bundled and css as well. only glyphicons are not showing up.