@import导入样式以及scss变量应用与static目录

@import函数:使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

static目录:就是无论你有没有在这个目录里用过,它都会进行编译打包

@import函数应用:先在在项目里创建一个common 目录, 目录里面分别创建css,js,scss文件夹,而后css文件夹里创建一个style.css文件,里面把App.vue页面的样式拿过来

而后在App.vue页面里面使用@import导入style.css文件,这样就可以实现样式改变了

scss变量:就是项目中uni-scss页面里面定义的文字颜色等,是uni-app内置的常用样式变量

我们也可以自己在uni-scss页面里面定义样式变量

直接把uni-scss页面里面定义的变量名拿过来即可,记得后面不要加东西,只要变量名即可

也可以把自己定义的样式变量放入common 目录中,在scss文件夹里创建一个scss文件,把样式变量放进去,然后在本页面用@import导入,一样可以用

点击scss文件夹右键点击新建,有一个选项叫自定义文件,前面写名称,后面写你要文件的类型即可(如:scss)

在uni-scss页面中记得以分号结尾,还有多点击几次重启按钮,不然还是会报错

相关推荐
会编程的土豆几秒前
前端和后端是怎么配合工作的(Go后端视角)
前端·golang·状态模式
w_t_y_y2 分钟前
vue父子组件通信(一)父子调用和通信(2)VUE3
前端·javascript·vue.js
Demon1_Coder6 分钟前
Day1-SpringAI-1.0.0版本
java·开发语言·前端
ZC跨境爬虫6 分钟前
跟着 MDN 学CSS day_42:等分轨道、层叠放置与混合布局
前端·javascript·css·ui·html
Cheney95016 分钟前
Vue 项目字体文件打包后 fonts 文件夹“消失”?原因分析与解决方案
前端·javascript·vue.js
问心无愧051313 分钟前
ctf show web入门68,69
android·前端·笔记
jingling55515 分钟前
Flutter | 从基本跳转到路由守卫
服务器·前端·网络·flutter·前端框架
神奇的代码在哪里21 分钟前
【单机离线版】大学考试题库复习工具:前端离线Excel解析 + localStorage持久化 + Playwright
前端·html·ai编程·题库复习·刷题软件·大学考试
daols8825 分钟前
vxe-table 实现数据分组统计与表尾合计
前端·javascript·vue.js·vxe-table
向日的葵00627 分钟前
Vue 函数定义、事件绑定与列表渲染精讲
前端·javascript·vue.js