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动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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高级编程-函数-郑阿奇
2011/07/04 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
BootStrap的双日历时间控件使用
2017/07/25 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
python 字符串追加实例
2019/07/20 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
Pandas的数据过滤实现
2021/01/15 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
历史专业毕业生的自我鉴定
2013/11/15 职场文书
安全检查管理制度
2014/02/02 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python