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 能做到这点吗？

- heroxav

Answer 1

您可以这样声明模块。在此查看通配符模块声明的更多信息。

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

  export default styles
}

- JoshA

---

你知道为什么它不允许精确路径吗？当我从错误的位置导入_variables.scss时，我想收到TS错误。你知道这是否可能在TS中实现吗？我在文档中没有看到任何明确的说明。 - heroxav

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

在我的测试中，我发现在后面导入 _variables.scss 到你的 .ts 文件时，拥有一个绝对路径是非常重要的。比如，我使用 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文件是完全相同的：~/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 文件中使用相同的路径导入它，那么一切都应该能够正常工作。

- SVANSKI

Answer 3

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

因此，如果您的文件存在于../foo/bar/_variables.scss中

请进行声明。

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

  export default styles
}

- felixmosh

---

这种方法不起作用，正是我面临的问题。SCSS文件位于与模块声明文件相同的目录中。因此，./_variables.scss应该作为相对路径工作，但实际上并没有。 - heroxav