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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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 UBB 解析实现代码
2011/11/27 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
session 加入redis的实现代码
2016/07/15 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python批量发送post请求的实现代码
2018/05/05 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
python中turtle库的简单使用教程
2020/11/11 Python
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
医学生自荐信范文
2013/12/03 职场文书
教师实习自我鉴定
2013/12/11 职场文书
大学生安全责任书
2014/07/25 职场文书
暑期培训心得体会
2014/09/02 职场文书
超市开店计划书
2014/09/15 职场文书
财务经理岗位职责
2015/01/31 职场文书
齐云山导游词
2015/02/06 职场文书
销售经理工作检讨书
2015/02/19 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL