How to import scss file as variable in react with typescript

In order to import SCSS as object in TS like this :

import * as styles from './index.scss';

• Create file 'global.d.ts' in your source directory (or outside, but must be included in the src directory defined in tsconfig)
• Add the following code inside

declare module '*.scss' {
  const content: {[className: string]: string};
  export = content;
}

https://basarat.gitbooks.io/typescript/docs/types/ambient/d.ts.html

I came across this question recently, and figured it might be useful to add an answer that helps do this at the time the project is generated (using create-react-app) and without the need to eject or modify the webpack configs:

create-react-app my-app --scripts-version=react-scripts-scss-ts

Be sure you have react-scripts-scss-ts installed.

If not run:

 npm i react-scripts-scss-ts --save

One of this way you work with .scss style on your create-react-app project. you need some steps on your projects.

1. git commit all changes
2. run yarn run eject from your project command prompt.
3. Go to the location and open the file config/webpack.config.dev.js approximately line #173. Replace test: /\.css$/, with test: /\.s?css$/,
4. Go to the location and open the file config/webpack.config.prod.js approximately line #185. Replace test: /\.css$/, with test: /\.s?css$/,

5. add your .scss file on your component like

   import './App.scss';
   

   and uses like

   <div className="your-styled-class-name">
       <p>Styed Text</p>
   </div>
   

That's it.

I solved that issue using Run Powershell as Administrator and execute that code: Set-ExecutionPolicy RemoteSigned Press A And Enter

Refer this if not clear: After npm updating packages .ps1 cannot be loaded because running scripts is disabled on this system

and refer this alsp: No such file or directory