score:30

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