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 - 内部模块中的导入声明不能引用外部模块