vue sass 全局引用

全局引用scss

在使用的过程中,我们有一些固有的颜色字体等等,需要整个网页都统一的,所以
需要放在全局,页面需要使用的时候直接调用即可.
当然也可以使用公共类的方式进行引入样式
但是更加推荐scss的变量方式,这样不管是字体还是背景,只要是同样颜色的地方都可以直接调用改变量就能达到想要的效果
这也使得class名称没有那么多,也避免了取名难的问题

引入scss

首先要先引入scss,不然无法使用

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

我的是创建项目的时候就已经添加了这个插件,所以所有的配置都有了,如果安装了不能用,请查看相应的环境配置问题

安装好了之后在创建 vue.config.js 文件,如果这文件在你项目的根目录下面已经存在则不用创建

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/css/index.scss";`
      }
    }
  }
};

如果有报错,不妨将 prependData,改成data试试

  • 注意: import 后面是我们创建的公共scss文件的位置

scss文件

// 默认背景颜色
$defaultBgColor:#409EFF

页面引用

<style lang="scss" scoped="scoped">
	.homePage{
		width: 100%;
		height: 100%;
		background: $defaultBgColor;
	}
</style>

此时页面就会显示对应的颜色

我的页面效果是这样的
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值