【踩坑】TypeScript 中使用 sass 动态设置样式

问题

在从 Vue2 项目转向 Vue3 项目时,不得不将已经封装好的 echarts 图表也升级成 Vue3 适配的版本,遇到了一个有些诡异的问题,在此记录一下。

背景:

在 Vue2 的项目中,为了动态设置 echarts 的相关配置,于是有这样一个文件:

css 复制代码
/* echart theme 主题颜色 字体等 */
$theme:#999999;
//统计图主题色系,主题色系修改,此处应相应修改
$lengendColors:"#409eff","#e6a23c","#67c23a","#d87c7c","#22e4b5","#b6a2de","#e4bc20","#d95850","#74B5F9";
$chartPrimary:rgba(255, 255, 255, 1);
$chartfontSize:12px;
$fontColor:#000000;
$markLineColor:yellow;
$platformColor:#67c23a; //平台类
$projectColor:#e6a23c;  //项目类
$standardColor:#0098d9; //标准工时
$declarationColor:#b6a2de; //申报工时
$chartHeight: 300px;

$success: #67C23A;
$warning: #E6A23C;
$danger: #ED1731;
$info: #909399;

:export {
    theme:$theme;
    lengendColors:$lengendColors;
    chartPrimary: $chartPrimary;
    chartfontSize:$chartfontSize;
    fontColor:$fontColor;
    markLineColor:$markLineColor;
    platformColor:$platformColor;
    projectColor:$projectColor;
    standardColor:$standardColor;
    declarationColor:$declarationColor;
    chartHeight: $chartHeight;
}

本来,我们是可以正常使用的,跑得动,也可以正常打包发布。按照以下方式使用:

javascript 复制代码
import echart from '../theme/theme.scss'

报错

现在,新开了一个 Vue3 项目,在封装 echarts 图表时,依然用了旧项目的那套代码,跑起来一切正常!!!但是呢,一旦打包就会报错!!!报错信息如下:

原因

出现这个错误的原因是,我们在 TypeScript 文件中尝试从 .scss 文件中导入内容,但 TypeScript 并不支持直接从 .scss 文件中导入变量或样式。.scss 文件是用于定义 CSS 样式和变量,而 TypeScript 主要用于定义 JavaScript 的类型和逻辑。

解决方法

可以将 SCSS 变量转换为一个 JavaScript 对象,并在 TypeScript 文件中导入这个对象。这通常需要在构建过程中使用一个工具来提取 SCSS 变量并将其转换为 JavaScript。

例如,可以创建一个 JSON 文件(或 TypeScript 文件),其中包含了所有的样式变量:

javascript 复制代码
{  
  "theme": "#999999",  
  "lengendColors": ["#409eff", "#e6a23c", "#67c23a", "#d87c7c", "#22e4b5", "#b6a2de", "#e4bc20", "#d95850", "#74B5F9"],  
  "chartPrimary": "rgba(255, 255, 255, 1)",  
  "chartfontSize": "12px",  
  "fontColor": "#000000",  
  "markLineColor": "yellow",  
  "platformColor": "#67c23a",  
  "projectColor": "#e6a23c",  
  "standardColor": "#0098d9",  
  "declarationColor": "#b6a2de",  
  "chartHeight": "300px",  
  "success": "#67C23A",  
  "warning": "#E6A23C",  
  "danger": "#ED1731",  
  "info": "#909399"  
}

然后在 TypeScript 文件中导入这个 JSON 文件:

javascript 复制代码
import echart from '../theme/theme.json'

于是!成功解决了问题。

相关推荐
使二颗心免于哀伤7 分钟前
《设计模式之禅》笔记摘录 - 10.装饰模式
笔记·设计模式
誰能久伴不乏12 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
悠哉悠哉愿意22 分钟前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
岩中竹1 小时前
广东省省考备考——常识:科技常识(持续更新)
笔记
涔溪1 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾1 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的1 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句1 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6661 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
Olrookie2 小时前
若依前后端分离版学习笔记(三)——表结构介绍
笔记·后端·mysql