注册登录

鸡胸肉终结者

鸡胸肉终结者

发布：2019-04-18 10:40
更新：2021-04-24 10:10
阅读：17510

uni-app如何全局引用scss文件

分类：uni-app

scss

项目创建模式: 使用vue-cli3 进行创建
遇到的问题:

我在src/assets/style里定义了一个common.scss文件,用来定义变量, 按vue-cli3文档中,可以在vue.config.js中加入如下代码
```
module.exports = {  
css: {  
    loaderOptions: {  
        sass: {  
            data: `@import "~@/assets/style/common.scss";`  
        }  
    }  
}  
}
```
这样在每个.vue文件中都可以使用common.scss里面的变量,而不用每个页面的<style>里去import。
但是这样做在npm run dev:mp-weixin 时则报错，在.vue文件里无法使用变量，在.vue文件的<style>里手动import才能编译通过,有没有什么方法能像vue文档这样自动引入呢?
使用vue-cli模式创建的项目,项目里面没有uni.scss,但是也可以使用里面的变量,要修改的话去哪里修改呢?

2019-04-18 10:40 负责人:无分享

8 个回复

1***@qq.com

1***@qq.com - 90后IT男

同求

Trust - 少说废话

cli 创建的 uni-app 项目没有 uni.scss 么？什么时候创建的。

鸡胸肉终结者 (作者)

就是这两天才创建的,完全找不到uni.scss这个文件,但是变量确实可以用

2019-04-18 10:45
Trust

回复鸡胸肉终结者:cli 创建的项目已补充 uni.scss。scss 或者 less 这种预编译语言，共享变量的话目前是通过 uni.scss 来实现的。

2019-04-18 14:58
鸡胸肉终结者 (作者)

回复 Trust:好的,谢谢

2019-04-18 17:34

2***@qq.com

在uni.scss这个文件自定义的变量，必须重新编译才起作用。

9***@qq.com

我定义的变量重新编译也不起作用

2019-07-23 17:49

同求

emem

/在app.vue里面的公共样式中引入scss文件 /
<style>
/每个页面公共css /
@import url("./uni.scss");
</style>
/在其他页面引用的时候需要指明/
<style lang="scss"></style>

Mike_Zheng - 前端/全栈开发

折腾了挺久, 貌似网上搜索到的在uni.scss下面写样式或者导入样式均无效,
在App.vue style中@import 'common/common.scss'; 反而有效了
但要注意App.vue style标签: <style lang = 'scss'>

小明子

说白了，就是vue.config.js里面失效了。

2020-06-15 14:37
miaomiao999

为啥我在app.vue中引入无效呢？你配置了啥吗？

2021-03-28 17:38

3***@qq.com

我无论在app.vue还是其他vue文件导入scss文件，都导入不了文件，在uni.scss导入却能使用，请问什么问题怎么解决啊？

单个页面引用有效，APP。vue 引用无效什么问题呢

该问题目前已经被锁定, 无法添加新回复