vite中ts中使用scss变量

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 文件