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祖孙组件之间的数据传递案例
Dec 07 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
Vue如何实现组件间通信
May 15 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
python2.7 json 转换日期的处理的示例
2018/03/07 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
如何使用python传入不确定个数参数
2020/02/18 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
Python文件操作的面试题
2013/06/22 面试题
家具促销活动方案
2014/02/16 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
投标承诺函范文
2015/01/21 职场文书