I am currently setting up a proof of concept project using ReactJS and typescript, and I want to incorporate CSS modules without ejecting the webpack configuration. Here are the steps I have taken so far:
- Installed create-react-app globally - npm install -g create-react-app
- Created a new project named 'firstapp' with TypeScript support - create-react-app firstapp --scripts-version=react-scripts-ts
- Installed react-app-rewired as a development dependency - npm install react-app-rewired --save-dev
- Installed necessary packages for CSS modules - npm install --save-dev codebandits/react-app-rewire-css-modules sass-loader node-sass
- Modified package.json scripts to use react-app-rewired - "start": "react-app-rewired start --scripts-version react-scripts-ts"
- Created a config-overrides.js file to apply css modules - const rewireCssModules = require('react-app-rewire-css-modules'); module.exports = function override(config, env){ config = rewireCssModules(config, env); return config; }
I have set up my App.module.scss file correctly and imported it in my App.tsx file:
import styles from './App.module.scss';
However, when I run the project, I encounter an error related to the css module: "Cannot find module './App.module.scss'."
The project works fine without TypeScript setup. What changes should I make to enable CSS modules?
I found typings-for-css-modules-loader, but I am unsure how to integrate it without ejecting the webpack configuration.
Thank you,
Thomas .T
EDIT 1: I created a global.d.ts file with:
declare module '*.css'
declare module '*.scss'
This resolved the issue without using typings-for-css-modules-loader in the end.
For detailed information, refer to this article: