babel-plugin-css-modules-transform
babel-plugin-css-modules-transform copied to clipboard
using babel-plugin-css-modules-transform with ssr not working
hi im using ssr and want to use babel-plugin-cs-modules transform to display my css my code is : webpackconfig.js:
module: {
rules: [
{
test:/\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
context: "/",
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
}
],
},
babelrc:
"plugins": [
"transform-decorators-legacy",
"transform-object-rest-spread",
[
"css-modules-transform",
{
"generateScopedName": "[name]__[local]___[hash:base64:5]",
"rootDir": "/",
"extensions": [".css"]
}
]
]
app.css:
div { background-color:#99cc00; padding:10px; }
App.js:
require('./src/styles/app.css');
css loader version is :
"css-loader": "^2.0.2",
babel-plugin-css-modules-transform version is :
"babel-plugin-css-modules-transform": "^1.6.2",
style loader version:
"style-loader": "^1.0.0",
am i doing something wrong or is there a versioning issue?
let me know if you need more information. thanks in advance
Were you able to solve this?
@simhox are you getting an error like this?
Warning: Prop `className` did not match. Server: "account-page_327l2" Client: "account-page_aqoHO"
Seems like classNames
haven't been matching since version 2 and newer (https://github.com/michalkvasnicak/babel-plugin-css-modules-transform/issues/103)