TypeScript 声明特定的 SCSS 模块

Question

我正在尝试声明要从 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 可以做到这一点吗？

Answer 1

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

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

  export default styles
}

Answer 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 文件中使用相同的路径导入它，那么一切都应该符合您的目的。

Answer 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
}