在多个组件的style使用 lang="scss"属性,一个页面上引入多个组件。
p***@163.com
- 发布：2023-07-28 16:26
- 更新：2023-07-28 17:01
- 阅读：260
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.8.11
手机系统： Android
手机系统版本号： Android 12
手机厂商： 一加
手机机型： 一加8
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
只加载一次根目录下的uni.scss
只加载一次根目录下的uni.scss
实际结果：
多次加载根目录下的uni.scss
多次加载根目录下的uni.scss
bug描述：
组件里的样式使用scss编写的时候,导入这样的组件会加载根目录下的uni.scss文件样式。如果一个页面有多个scss样式的组件会加载多次uni.scss文件样式。App和H5都会这样,建议优化加载。
2 个回复
爱豆豆 - 办法总比困难多
不对啊 uni.scss 本身就是全局样式 你是不是在组件内引入uni.scss这个文件了
能发一下个demo吗
陈海宏5258 - 我是人。
这是正常的，
因为 uni.scss 里面基本上放的是全局通用的变量、函数什么的，所以每个组件的style(lang=scss)都要引入它。
如果不引入uni.scss，编译组件样式肯定报错，如找不到变量、找不到函数之类的错误。
如果你是有一些全局的样式，你可以放在app.vue里引入，这样就不会造成每个组件都会有一份拷贝。
但是把uniapp编译成小程序的话，全局样式可能对组件不生效。
p***@163.com (作者)
我是想在组件里使用scss变量,我是期望只加载一次uni.scss样式,而不是页面有多少个scss编写的组件就加载多少个uni.scss,冗余加载了
2023-07-29 00:37
陈海宏5258
回复 p***@163.com: 每个组件的style(lang=scss)都是独立转成css的。不引入uni.scss的话，如果使用到uni.scss里的变量或其他内容是会报错的。
2023-07-29 18:47