I can't enable the CSS modules. I was following this post but it didn't work. This is my code
rollup.config.js
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import postcss from 'rollup-plugin-postcss';
export default [
{
input: "src/index.ts",
external: Object.keys(pkg.peerDependencies || {}),
preserveModules: true,
plugins: [
typescript({
typescript: require("typescript")
}),
postcss({
extensions:['.css']
}),
],
output: [
{ file: pkg.main, format: "cjs" },
{ file: pkg.module, format: "esm" }
]
}
];
tsconfig.json
{
"compilerOptions": {
"declaration": true,
"declarationDir": "./dist",
"strict": false,
"allowSyntheticDefaultImports": true,
"allowJs": true,
"sourceMap": true,
"noUnusedParameters": true,
"strictNullChecks": true,
"moduleResolution": "node",
"noImplicitAny": true,
"outDir": "./dist",
"target": "es5",
"lib": ["dom", "es6"],
"jsx": "react",
"plugins": [{ "name": "typescript-plugin-css-modules" }]
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
Background0.tsx
import React from 'react';
import PropTypes from 'prop-types';
import styles from "./Background0.module.css";
export const Background0 = (props: any) =>
{
return (<>
<section className={styles.container}>
</section>
</>);
}
Background0.defaultProps =
{
}
Background0.propTypes =
{
}
Background0.module.css
.container{
width: 100%;
height: 100%;
background-color: aqua;
color: aqua;
}
I tried several things but none of them worked. How should I configure it?
A lot of youtube videos I watched show only the name change from .css to .module.css and the import of styles
, it seems easy but is not working on my project