typescript - 在Vue中将scss变量导入打字稿
问题描述
我正在尝试将 SASS (scss) 变量导入到 typescript Vue 3 项目中的 javascript 中:
// @/assets/styles/colors.scss
$white: #fff;
// @/assets/styles/_exports.scss
@import "./colors.scss";
:export {
white: $white;
}
<template>
<div>
</div>
</template>
<script lang="ts">
import colors from "@/assets/styles/_export.scss";
</script>
// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: '@import "@/assets/styles/colors.scss";'
}
}
}
};
但我得到了Cannot find module '@/assets/styles/_export.scss' or its corresponding type declarations.
。
有什么想法吗?
谢谢
解决方案
shims-scss.d.ts
我在目录中创建了一个名为的声明文件src
。
// shims-scss.d.ts
declare module '*.scss' {
const content: {[className: string]: string};
export default content;
}
正如您所写的scss
那样,我可以从文件中导入对象。_exports.scss
推荐阅读
- c++ - 将所有模板类型传递给运算符而不指定所有类型
- django - 反向 django 外键查找的复杂性
- java - 为什么在没有任何连接的情况下继续下载?
- c# - ASP C# 模型绑定验证
- angular - 没有页眉/面包屑/页脚的登录页面
- c# - 检查 json 是否真的是 T 类型
- python - Matplotlib/numpy/pandas IndexError:索引 0 超出轴 0 的范围,大小为 0
- php - 使用 CSS 更改 PHP 中的背景颜色
- apache-spark - map() 和 flatMap() 的输出 - 有什么区别
- vue.js - 使用vue中的复选框过滤列表项