How to use React with Typescript and SASS

Question

I am bootstrapping my app using the create-react-app and I want to develop using Typescript and SASS. I have been using Angular before where I could easily reference the SASS file like this:

@Component({
  selector: 'unit-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: []
})

In React I am trying to import the SASS file like this:

import s from "./mystyles.scss";

But I am getting the error

Cannot find module "./mystyles.scss"

. How can I import the SASS file into the .tsx file?

Answer 1

Assuming you have successfully installed node-sass in a TypeScript create-react-app React application, just as you would Add/import a CSS stylesheet by doing the following:

import './mystyles.css';

For a SCSS stylesheet, you would simply change the file type:

import './mystyles.scss';

In your example you simple need to treat it as a Import a module for its side effects only instead of a default import like you are currently attempting.

You can also treat it as a SCSS Module by updating the SCSS filename to mystyles.module.scss and importing it as follows:

import styles as './mystyles.module.scss';

I was able to achieve both bits of functionality doing the following as Sass/SCSS support is built in by default in [email protected] and higher projects:

1. Created a TypeScript create-react-app using command npx create-react-app my-app --template typescript
2. Navigated into the create directory and install node-sass using command npm install --save node-sass
3. Changed default generated App.css to App.scss
4. Changed import in App.tsx from import './App.css'; to import './App.scss';

Make sure you have node-sass installed. If that doesn't help, you may need to revisit how you created/converted your create-react-app to be in TypeScript.

You need to either import it as import './mystyles.scss'; or actually put module in the file name and import it as import whatever from './mystyles.module.scss';.