Accepted answer

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';.

Related Query

More Query from same tag