@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页面中记得以分号结尾,还有多点击几次重启按钮,不然还是会报错

相关推荐
鹏程十八少5 分钟前
4.Android 大图片导致的内存溢出实战 KOOM + Profile +MAT 深入分析
前端
BeefyBytes5 分钟前
elpis DSL-跳出 CRUD 地狱的技术破局
前端
Zzz_睡不醒5 分钟前
HTML5、CSS3(2)
前端·css3·html5
Cache技术分享9 分钟前
153. Java Lambda 表达式 - 深入理解 Java Function 接口及其高性能变体
前端·后端
圆心角10 分钟前
vue diff 和 react diff区别,面试必备
前端·vue.js·react.js
FogLetter12 分钟前
HTML5 拖拽魔法:从零打造iPad般的丝滑体验
前端·html
阿慧勇闯大前端12 分钟前
最近面试问了很多次的ES6的新特性-Symbol是干啥的?
前端·面试
星_离12 分钟前
Vue组件通信很难吗?
前端·vue.js
Mintopia15 分钟前
《当 AI 开始“打字机”:Web 流式输出(SSE)的魔幻漂流》
前端·javascript·aigc
一大树17 分钟前
深入理解 JavaScript 原型链:构造函数、实例与原型三角关系
前端·javascript