npm install
npm run demo
Everywhere across the entire Internet I read that I can use css-modules in this way:
import styles from "./style.css";
// import { className } from "./style.css";
element.innerHTML = '<div class="' + styles.className + '">';This code is copied from official https://github.com/css-modules/css-modules
Webpack config:
module.exports = {
mode: 'development',
entry: {
bundle: "./src/index.js"
},
output: {
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "css-loader",
options: {
modules: true
}
}
]
}
]
}
};CSS (index.css):
.testClass {
color: red;
}JS: (index.js):
import styles from "./index.css";
console.log(styles.testClass); // undefined!!! WHY WHY WHY
console.log(styles.locals.testClass); // _22890ashYFWamah25O4_Va - correct
What the heck is going on?
Why all examples across the Internet seems to show that library works differently than it really does? All the class names seems to be in locals property of export object.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent