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

Question

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

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

进入error以下：

  

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

我想使用如下的类名：

className={styles.anyClassName}

Answer 1

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

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>
   

就是这样。

Answer 3

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

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

Answer 4

男性，请确保您有react-scripts-scss-ts。

如果不运行：

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

Answer 5

我使用以管理员身份运行 Powershell 解决了该问题并执行该代码： Set-ExecutionPolicy RemoteSigned 按 A 并输入

如果不清楚，请参考： After npm updating packages .ps1 cannot be loaded because running scripts is disabled on this system

并参考此 alsp： No such file or directory