vue-cli3.x配置全局的scss的时候报错问题及解决


Posted in Vue.js onApril 30, 2022

vue-cli3配置全局scss报错

在vue.config.js配置的时候用prependData不要用data

sass: {
  // 根据自己样式文件的位置调整 /旧版的scss-loader 是data 新版的是 prependData
          prependData: `@import "@/styles/global.scss";`
  }, 

vue-cli3配置全局scss变量

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-cli3.x配置全局的scss的时候报错问题及解决

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

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

Tags in this post...

Vue.js 相关文章推荐
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
关于vue-router-link选择样式设置
Apr 30 #Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 #Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 #Vue.js
Vue操作Storage本地化存储
Apr 29 #Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 #Vue.js
详解Vue3使用axios的配置教程
Apr 29 #Vue.js
You might like
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python基础之函数用法实例详解
2014/09/10 Python
python修改注册表终止360进程实例
2014/10/13 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
python实现Decorator模式实例代码
2018/02/09 Python
python最长回文串算法
2018/06/04 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
python两个list[]相加的实现方法
2020/09/23 Python
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
自我评价的正确写法
2013/09/19 职场文书
物业管理个人自我评价
2013/11/08 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
小学四年级学生评语
2014/12/26 职场文书
学校开除通知书
2015/04/25 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
小型婚礼主持词
2015/06/30 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python