Vue3.5 + Vite4.3 + Echarts5 +Tailwind CSS开发大屏可视化项目时遇到的问题总结——5

一、实现数值渐变效果时报错

数值渐变的效果，本质上是通过背景渐变，加上字体镂空的方式来实现的，要实现的效果如下图所示：

App.vue中的代码如下图所示：





TotalData.vue中的代码如下图所示：











style.css中的代码如下图所示：



结果页面报错，如下图所示：

产生报错的原因：

之所以会报错是因为我忘了安装Sass预处理器，但是却在style.css里面写了// 这个单行注释符号来注释，这个// 单行注释属于Sass/Less等预处理器的扩展语法

解决办法：

①使用原生的CSS注释语法（标准注释）

代码如下图所示：



此时页面如下图所示：

②安装Sass，启用CSS预处理器，并将style.css重命名为style.scss

在终端输入npm install -D sass或者 npm i -D sass如下图所示：

然后把style.css文件重命名成style.scss，如下图所示：

由于Sass预处理器完全兼容原生CSS语法，因此在style.scss文件里既可以使用原生的CSS注释语法，也可以使用单行注释语法， 如下图所示：



如果想要去掉上面代码里@tailwind下面的波浪线，可以安装一下stylelint-config-tailwindcss插件

npm install -D stylelint-config-tailwindcss postcss

复制上面的命令，按鼠标右键粘贴到终端，如下图所示：

然后在项目的根目录下创建.stylelintrc.js文件，如下图所示：

代码如下图所示：

然后点击VSCode左下角的设置图标，如下图所示：


然后在setting.json中加上3行代码，如下图所示：

再回到style.scss文件中，@tailwind下面的波浪线就没有了，如下图所示：



也可以换成SCSS支持的单行注释，代码如下图所示：



注意：把style.css改成了style.scss后，main.js文件里的代码也要改一下，如下图所示：

③修改PostCSS配置

安装postcss-scss依赖，然后在postcss.config.js中添加语法扩展插件：

npm install -D postcss-scss

复制上面的命令，按鼠标右键粘贴到终端，如下图所示：

然后在postcss.config.js加上一行代码，如下图所示：