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 相关文章推荐
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
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中计算字符串相似度的函数代码
2012/12/29 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
php统计数组元素个数的方法
2015/07/02 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
DOM精简教程
2006/10/03 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
vue生命周期实例小结
2018/08/15 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
Python3中的2to3转换工具使用示例
2015/06/12 Python
Numpy掩码式数组详解
2018/04/17 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
香港士多网上超级市场:Ztore
2021/01/09 全球购物
机关单位人员学雷锋心得体会
2014/03/10 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
公司捐书倡议书
2015/04/27 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
Redis如何实现分布式锁
2021/08/23 Redis