如何导入 scss 文件作为变量与打字稿反应

Question

I am unable to import scss file in below format.

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

getting below error :

can not find module './index.scss'

I want to use class name like below :

className={styles.anyClassName}

Answer 1

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

Answer 2

我最近遇到了这个问题，并认为添加一个有助于在生成项目时执行此操作的答案（使用 create-react-app）并且无需弹出或修改 webpack 配置可能会很有用：

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

Answer 3

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

If not run:

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

Answer 4

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.

Answer 5

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