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?

Checkout create-react-app with Sass

Nino Filiu
– Nino Filiu

2019-03-08 21:58:43 +00:00
Commented Mar 8, 2019 at 21:58 — Nino Filiu
– Nino Filiu, Commented Mar 8, 2019 at 21:58

Dharman · Accepted Answer · 2020-03-21 17:06:15Z

38

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:

Created a TypeScript create-react-app using command npx create-react-app my-app --template typescript
Navigated into the create directory and install node-sass using command npm install --save node-sass
Changed default generated App.css to App.scss
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';.

edited Mar 21, 2020 at 17:06

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Mar 8, 2019 at 21:50

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hizqeel Javed Over a year ago

hi can you put scss styles in variable in a TSX file ?

Goran_Ilic_Ilke Over a year ago

I tried and not working for me,scss file works like simple css when i import scss files as modules in components(in my react-ts-starter).I dont know how things stands with "create-react-app" . @Barcode HJ

Giovan Cruz Over a year ago

Just for record, @import will be deprecated in favor of @use and @forward, and support will be dropped by 2022 at the latest.

RenceAbi Over a year ago

Including Node Sass, are deprecated. If you're a user of Node Sass, you can migrate to Dart Sass by replacing node-sass in your package.json file with sass

Collectives™ on Stack Overflow

How to use React with Typescript and SASS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related