npm i
npm run build -- --entry ./index.js
HTML emitted with <div class="<some css module hashed classname>">
and css chunk that inserted to html head.
HTML emmited with <div class="">
and no css chunk at all.
<div class="<%= require('./item.css').item %>"></div> |
// Just to make sure webpack is build something |
.item { | |
color: red; | |
} |
{ | |
"private": true, | |
"name": "example", | |
"scripts": { | |
"build": "webpack" | |
}, | |
"devDependencies": { | |
"css-loader": "^5.0.0", | |
"html-webpack-plugin": "^5.0.0-alpha.10", | |
"mini-css-extract-plugin": "^1.2.1", | |
"webpack": "^5.4.0", | |
"webpack-cli": "^4.1.0" | |
} | |
} |
const HTMLWebpackPlugin = require('html-webpack-plugin'); | |
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | |
module.exports = { | |
mode: 'development', | |
devtool: false, | |
module: { | |
rules: [ | |
{ | |
test: /\.css$/, | |
use: [ | |
{ | |
loader: MiniCssExtractPlugin.loader | |
}, | |
{ | |
loader: 'css-loader', | |
options: { | |
modules: true | |
} | |
} | |
] | |
} | |
] | |
}, | |
plugins: [ | |
new HTMLWebpackPlugin({ | |
template: 'index.ejs' | |
}), | |
new MiniCssExtractPlugin(), | |
] | |
}; |
@klesun nope, with modules: true
it returns JSON with hashed classes of CSS file.
hm, ok, never mind then
@ogonkov, you sure you don't have a mistake here at
class="<%= require('./item.css').item %>"
? I'm not familliar with this format, but isn't it supposed to be something likestyle="<%= require('./item.css').item %>"
, withstyle
attribute, notclass
?Just intuitively, when you are taking
.item
field from a css file, I would expect it to return css properties of this selector, not a class name...