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