0

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

Caeta
  • 431
  • 3
  • 14

0 Answers0