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 20 Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue实力踩坑之push当前页无效
Apr 10 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
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
python中列表元素连接方法join用法实例
2015/04/07 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python生成大写32位uuid代码
2020/03/03 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
python Gabor滤波器讲解
2020/10/26 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
《英英学古诗》教学反思
2014/04/11 职场文书
奠基仪式策划方案
2014/05/15 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
django上传文件的三种方式
2021/04/29 Python
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
Python如何加载模型并查看网络
2022/07/15 Python
源码安装apache脚本部署过程详解
2022/09/23 Servers