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

相关推荐
musk12123 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录2 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css