vue中配置scss全局变量的步骤


Posted in Vue.js onDecember 28, 2020

在写项目的过程中,如果用的是scss来编写样式代码,常常需要定义各种变量,例如主题色、主字号之类的,因此我们会把这些变量写到一个单独的_variable.scss文件内,但是每次都要在vue单文件内引入这些变量未免太繁琐了,所以有没有办法可以默认把变量文件作为全局文件进行引入呢?答案是肯定的,可以用下面的方法进行配置,可以根据当前使用的框架和环境来进行方法的选择。

一、使用vue-cli(即vue-cli2)脚手架时

1. 首先,需要安装一个loader,sass-resources-loader

npm install sass-resources-loader --save-dev

2. 找到build文件夹下的utils.js文件,在文件内找到这段配置代码

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
}

3. 修改其中的scss项,改为

scss: generateLoaders('sass').concat({
   loader:'sass-resources-loader',
   options:{
    resources:path.resolve(__dirname,'../src/styles/_variable.scss')
   }
  })

4. 重启项目,即可在其他文件内使用这些变量文件了

二、使用@vue/cli(即vue-cli3)脚手架时

1. 找到vue.config.js文件,如果没有的话,则自己在根目录新建一个即可

2. 在文件内编写如下代码:

module.exports = {
 css: {
  loaderOptions: {
   sass: {
    data: `@import "@/styles/_variable.scss";`
   }
  }
 }
}

3. 重启项目,即可使用

注意:如果编写完以上代码,重启项目后出现这个错误:

Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

那么说明,你安装的sass-loader应该是V8的版本,可以在package.json中查看是否确实如此,如果的确是v8版本以上,则需要配置不同的写法,因为在V8中已经废除了data这个配置项,改为了prependData,具体可以在vue cli官网中看到此说明。【传送门】

vue中配置scss全局变量的步骤

 

因此,我们需要将配置代码修改成如下样式:

css: {
  loaderOptions: {
    sass: {
      prependData: `@import "~@/styles/_variable.scss";`
    }
  }
}

好了,重启一下项目,大功告成。

以上就是vue中配置scss全局变量的步骤的详细内容,更多关于vue配置scss全局变量的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue中如何自定义右键菜单详解
Dec 08 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 #Vue.js
Vue仿百度搜索功能
Dec 28 #Vue.js
vue中watch的用法汇总
Dec 28 #Vue.js
浅析vue中的nextTick
Dec 28 #Vue.js
Vue实现省市区三级联动
Dec 27 #Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 #Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 #Vue.js
You might like
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
Python网页解析器使用实例详解
2020/05/30 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
设计师珠宝:Ylang 23
2018/05/11 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
环境科学专业个人求职信
2013/09/26 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
书香校园活动方案
2014/02/28 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python