scss 变量在 TS 中使用

1.在.scss文件中使用:export导出变量

$menuText: rgba(255, 255, 255, 0.65);
$menuActiveText: #409eff;

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
}

2.把.scss后缀修改为.module.scss后缀，并在vue组件中导入

// 导入
import styles from "../styles/vars.module.scss";

// 在JS中使用
console.log(styles.menuText);

3.在Typescript中使用，创建声明文件filename.module.scss.d.ts

export interface IGlobalScss  {
    menuText: string;
    menuActiveText: string;
}
export const styles: IGlobalScss;
export default styles;

4.在vue组件中使用，输入'styles.'时会有代码提示

// 导入
import styles from "../styles/vars.module.scss";

// 在JS中使用
console.log(styles.menuText);

解释：

• Vite默认支持以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件
• 如果使用webpack作为打包工具，参考此链接。