TypeScript 声明特定的 SCSS 模块

Posted

技术标签:

【中文标题】TypeScript 声明特定的 SCSS 模块【英文标题】:TypeScript declare specific SCSS module 【发布时间】:2021-01-19 17:35:32 【问题描述】:

我正在尝试声明要从 TypeScript 导入的特定 SCSS 模块。我有这个运行良好的声明文件:

declare module '*.scss' 
  const styles: 
    a: string
    b: string
    c: string
  

  export default styles

但我想以某种方式缩小*.scss,以便此声明文件仅适用于位于同一目录中的SCSS文件_variables.scss

我尝试将*.scss 替换为_variables.scss./_variables.scss,但TypeScript 根本找不到模块声明。

TypeScript 可以做到这一点吗?

【问题讨论】:

【参考方案1】:

您可以像这样进行模块声明。阅读更多关于通配符模块声明here。

declare module '*_variables.scss' 
  const styles: 
    a: string
    b: string
    c: string
  

  export default styles

【讨论】:

你知道为什么它不允许精确的路径吗?当我从错误的位置导入 _variables.scss 时,我想收到 TS 错误。您知道 TS 是否可以做到这一点?我在文档中没有看到任何明确的说明。【参考方案2】:

我测试了不同的案例来导入_variables.scss。我认为@JoshA 的答案是灵活处理文件的不同(绝对、相对)路径的好方法。但是,正如您在评论中提到的,当您从错误的位置导入 _variables.scss 时,您可能会遇到 TS 错误。

为此,我在根目录中创建了一个文件夹assets。然后我在assets 文件夹中创建了_variables.scss_variables.d.ts。然后,我在 tsconfig.json 类型中包含了 './_variable.d.ts'。

root
   /assets
          _variables.dt.ts
          _variables.scss

在我的测试中,我意识到拥有绝对路径很重要,您稍后将使用该绝对路径在 .ts 文件中导入 _variables.scss。例如,我使用 Nuxt.js,您可以通过~ 定义根路径。如果我需要导入_variables.scss,我会一直使用

//someFile.ts
import SomeVariableName from `~/assets/_variables.scss`

因此,如果我如下所示定义我的_variables.d.ts 文件,一切都会按照您的需要进行。

//_variables.d.ts
declare module '~/assets/_variables.scss' 
  const styles: 
    a: string
    b: string
    c: string
  

  export default styles

如您所见,_variables.scss 的路径对于 import 和 declare 语句完全相同:~/assets/_variables.scss。您将无法使用相对路径导入文件。例如,这些不起作用:

import SomeVariable from '../assets/_variables.scss'
import SomeVariable from './assets/_variables.scss' 
import SomeVariable from '../_variables.scss'
import SomeVariable from './_variables.scss'

总而言之,如果您在 declare module 'Absolute-Path-of-_variables.scss-File-As-You-Import-It-In-Other-.ts-files' 中定义到 _variables.scss 的绝对路径并在 .ts 文件中使用相同的路径导入它,那么一切都应该符合您的目的。

【讨论】:

【参考方案3】:

尝试将import的整个路径放在declare module中。

所以如果你的文件存在于../foo/bar/_variables.scss

声明

declare module '../foo/bar/_variables.scss' 
  const styles: 
    a: string
    b: string
    c: string
  

  export default styles

【讨论】:

这种方法不起作用正是我面临的问题。 SCSS 文件与模块声明文件位于同一目录中。所以./_variables.scss应该作为相对路径工作,但不能。

以上是关于TypeScript 声明特定的 SCSS 模块的主要内容,如果未能解决你的问题,请参考以下文章

Typescript - 泛型

TypeScript - 条件模块导入/导出

Typescript - 内部模块中的导入声明不能引用外部模块

仅导入 typescript 模块声明

仅将 TypeScript 环境声明添加到特定文件(如 *.spec.ts)

VueJS/Typescript 错误:找不到模块“我的模块”或其相应的类型声明