21

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?

1

1 Answer 1

35

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 react-scripts@2.0.0 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';.

3
  • 1
    hi can you put scss styles in variable in a TSX file ?
    – Barcode HJ
    Dec 6, 2020 at 18:20
  • 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 Jul 20, 2021 at 13:17
  • Just for record, @import will be deprecated in favor of @use and @forward, and support will be dropped by 2022 at the latest. Jul 26, 2022 at 22:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.