hbuilderx 2.9.8 公用css样式_浅谈关于vue中scss公用的解决方案
简述
最近由于项目要求查阅了很多关于scss公用的文章，以下只是对那些文章进行简单的总结
解决方法
a.当我们要使用scss文件的共用时，首先我们就要想到如何应当如何编辑scss文件，比如降低scss文件的变量与混入的耦合，我们可以将scss文件中的变量和混入分离开来使用单独的文件存储，此外还可以编写一些默认样式的scss文件。
variable.scss：存储scss变量的文件
mixin.scss：存储scss混入的文件
base.scss：存储默认样式的scss文件
b.现在最关键的是如何让vue组件也能用使用我们定义的公用的scss文件，当然我们也可以在每个组件中使用import语句导入相应的scss文件，但是这样会导致代码臃肿，难以维护。所以我们可以借助相关工具来解决这个问题。
a.方法1
如果使用的是vue-cli的版本是比较低的版本，我们可以通过使用sass-resources-loader这个插件，修改vue-cli的目录下build/utils.js。从而实现scss文件的共享。
步骤1：首先安装sass-resources-loader这个插件。
步骤2：修改build文件夹下的utils.js文件,找到return选项，修改它的scss属性进行入下配置，其他不用改变。
步骤3：测试阶段，新建一个Test.vue组件，进行入下配置
b.方法2
如果使用的vue-cli的版本是高版本的，那么可以直接修改vue.config.js这个文件的css.loaderOptions选项，就可以让每个组件使用公用的scss文件了。
步骤1：同样首先安装sass-resources-loader这个插件。
步骤2：在项目主目录下新建一个vue.config.js配置文件。大概的配置自行搜索/戳这里/gi
步骤3：测试阶段，和方法一的步骤3一样。
c.方法3
如果使用的vue-cli的版本是高版本的，那么可以直接修改vue.config.js这个文件的chainWebpack这个属性来实现多个scss文件的公用。
步骤1：同样首先安装sass-resources-loader这个插件。
步骤2：在项目主目录下新建一个vue.config.js配置文件。大概的配置自行搜索/戳这里/gi
步骤3：测试阶段，和方法一的步骤3一样。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小编。
hbuilderx 2.9.8 公用css样式_浅谈关于vue中scss公用的解决方案相关推荐
- css中如何实现帧布局_浅谈web前端中的表格布局与CSS盒子布局
在web前端设计排版时我们可能会用到表格布局和div+CSS布局,但现在主要使用后者,为何?今天我们来谈一谈两者之间的发展和原理. 话不多说下面来干货 发展过程 上个世纪Web开发人员流行使用表格进行 ...
- mysql declare与set的区别_浅谈MySQL存储过程中declare和set定义变量的区别
在存储过程中常看到declare定义的变量和@set定义的变量.简单的来说,declare定义的类似是局部变量,@set定义的类似全局变量. 1.declare定义的变量类似java类中的局部变量,仅 ...
- allegro差分信号走线_浅谈硬件设计中的一些思路和方法（5）—信号系统，又学到了...
房价在涨,客户需求在涨,体重在涨,房租在涨,火气在涨,唯一不涨的大概只有薪资了??? 现在客户好套路啊~我们卖的A+B,他非要让我在B上开一个兼容C的口子,然后他用C+B.问题是C不是我们的产品啊~让 ...
- 中day参数介绍_浅谈生物制药中的 CHO 细胞培养工艺开发
来源:Cytiva思拓凡 未来随着制药企业在生物制剂领域的投入,预计至 2021 年全球生物药市场都将按照复合年增值率 19% 的速度增长,以市场微末计算,2021 年将达到 200 亿美元.中国生物 ...
- docker -v 挂载文件_浅谈关于docker中数据卷的操作，附带案例
Volume数据卷的由来: Docker镜像是由多个文件系统(只读层)叠加而成.当我们启动一个容器的时候,Docker会加载只读镜像层并在其上添加一个读写层.如果运行中的容器修改了现有的一个已经存在的 ...
- 对于局部变量_浅谈Shell函数中全局变量和局部变量
Shell中函数的两种变量 这里的两种变量是针对于函数来讲的,非脚本. (1) 全局变量 在函数内部定义的变量 特点: 脚本中主代码可以获取. 注意!!!: 脚本中(函数外部)定义的变量,在本脚本的函 ...
- ftl有三种映射地址_浅谈以太坊中的三种“树”
无论是比特币还是以太坊,它们都是完全由代码创造出来的,它们的几乎所有一切都是程序执行的结果.对计算机程序有些了解的朋友应该都知道,计算机程序离不开数据结构和算法. 顺便提一下,有部分人不认为比特币和以 ...
- python中if和elif的区别_浅谈对python中if、elif、else的误解
今天下午在练习python时用了"if...if...else..."的分支结构,结果运行出来吓我一跳.原来我想当然的认为"if...if...else..." ...
- mysql创建存储过程意义_浅谈一下mySql中创建存储过程
首先说一下为什么要使用存储过程,存储过程是在数据库中预编译的程序代码,其执行效率显然要比从程序端传过去的sql语句要高的多,这样既可以节省网络带宽,又可以加快sql的执行速度,可以很好的提高系统的性能 ...
最新文章
- Win 2003的“远程桌面”需要进一步管理
- 2006.08.10
- Gson转换 — json数据转换为Object实体公共方法
- SpringBoot 上传多个文件
- 你必须知道的容器监控 (1) Docker自带子命令与Weave Scope
- MySQL Replication需要注意的问题
- 迭代器、生成器、递归、二分法
- jQuery size()函数
- POJ 1635 树的最小表示法
- java爬虫视频教程_JAVA开发教程:java视频教程java爬虫实战项目 百度网盘
- Ubuntu安装sasquatch时执行./build.sh报错：--no-check-certificate
- maven配置smartupload_SmartUpload文件上传组件的使用教程
- 你的人生经验，究竟是在帮你，还是在毁你？
- java计算机毕业设计销售企业报价管理系统源码+系统+数据库+lw文档+mybatis+运行部署
- Spring框架核心思想
- 虚拟机打电话发短信方法
- Java代理服务器---Freedom_Server
- 昆明拟整治11类陋习 行人翻越隔离设施罚50元
- 如何配置一个极简舒适的终端环境：oh-my-zsh 和iterms配置
- 通过Unity2D独立开发一款瓷砖式RPG游戏需要学习哪些知识？