Enable CSS modules for .module.css

[egoist]

Automatically enable CSS modules for .module.css .module.styl .module.stylus .module.scss .module.sass .module.less

[daniele-zurico]

Hi there I know that modules have been implemented with scss but I'm not able to get it working:
"rollup-plugin-postcss": "^1.6.2",

Rollup.config.js:

plugins: [
    external(),
    postcss({
      modules: true
    }),

helloWorld.module.scss

and in the tsx file:

import * as React from 'react';
import styles from './helloWorld.module.scss';

[!] (rpt2 plugin) Error: /Users/daniele/Documents/Projects/capgemini-conception/react-library/src/helloWorld/HelloWorld.tsx(2,20): semantic error TS2307 Cannot find module './helloWorld.module.scss'.

Am I doing something wrong?

[mildfuzz]

Hi there I know that modules have been implemented with scss but I'm not able to get it working:
"rollup-plugin-postcss": "^1.6.2",

Rollup.config.js:

plugins: [
    external(),
    postcss({
      modules: true
    }),

helloWorld.module.scss

and in the tsx file:

import * as React from 'react';
import styles from './helloWorld.module.scss';

[!] (rpt2 plugin) Error: /Users/daniele/Documents/Projects/capgemini-conception/react-library/src/helloWorld/HelloWorld.tsx(2,20): semantic error TS2307 Cannot find module './helloWorld.module.scss'.

Am I doing something wrong?

Was this resolved? looking at the same issue...

[daniele-zurico]

Hi @mildfuzz yes I got it working correctly. This is my config:

const postcss = require('rollup-plugin-postcss');
module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        modules: true,
      })
    );
    return config;
  },
};

[aravindsagar]

For anyone stumbling into this thread, this is not an issue with rollup-plugin-postcss. The error message says its coming from rpt2 (rollup-plugin-typescript2). This means that typescript does not know what to do with those imports.

To resolve this, simply add this to src/globals.d.ts as needed:

declare module "*.module.css";
declare module "*.module.scss";

You can also install typescript-plugin-css-modules for IDE support.