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

Question

我无法以以下格式导入scss文件。

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

到达下面error：

找不到模块'./index.scss'

我想使用如下的类名：

className={styles.anyClassName}

Answer 1

为了像这样在TS中将SCSS作为对象导入：

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

• 在源目录（或外部，但必须包含在tsconfig中定义的src目录中）中创建文件“ global.d.ts”
• 在内部添加以下代码

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

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

Answer 2

其中一种方式可以让您.scss在项目中保持风格create-react-app。您的项目需要一些步骤。

1. git 提交所有更改
2. yarn run eject从项目命令提示符运行。
3. config/webpack.config.dev.js转到大约第 173 行的位置并打开文件。test: /\.css$/,用。。。来代替test: /\.s?css$/,
4. config/webpack.config.prod.js转到大约第 185 行的位置并打开文件。test: /\.css$/,用。。。来代替test: /\.s?css$/,

5. 将您的文件添加.scss到您的组件上，例如

   import './App.scss';
   

   并使用类似

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

就是这样。