vite中使用scss导出变量到js/ts中作为变量使用

合集 - Vite(3)

1.在Vite构建的项目中使用svg图标2023-10-152.在Vite项目中使用scss创建全局变量2023-10-15

3.vite中使用scss导出变量到js/ts中作为变量使用2023-10-25

收起

定义scss

定义一个scss文件，注意，这里的文件名要以module.scss结尾，不然会出现读写错误的问题。

$background-color_hover:  #e4e8ec;
$background-color_chosed: #f44343;

:export {
    bgc_hover: $background-color_hover;
    bgc_chosed: $background-color_chosed;
}

.module.scss与.scss的区别

以下是.module.scss与.scss结尾读到的内容区别
先来看.module.scss，这个样子可以看出，scss经过处理后到js中变成了纯文本格式。

:export {
  bgc_hover: #e4e8ec;
  bgc_chosed: #f44343;
}

接下来看.scss格式，可以看到，接收到的参数为json格式，在js中直接读取到对象，直接引用即可。

{
    "bgc_hover": "#e4e8ec",
    "bgc_chosed": "#f44343"
}

在JS/TS中引入

在引入后，直接使用变量名.样式即可。

const click = async (item: respoItem) => {
    const styles = await import ('@/renderer/style/leftBar/respoItem.module.scss')
    console.log(styles.bgc_hover)
    respoStore.chooseRespo(item)
}

坑点

在已经被vite当做全局样式导出的scss文件中不要使用:export做再次导出，页面会提示错误。