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的异步更新实现原理
Dec 22 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
Python编程实现蚁群算法详解
2017/11/13 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
书香家庭事迹材料
2014/05/09 职场文书
美容院合作经营协议书
2014/10/10 职场文书
团代会闭幕词
2015/01/28 职场文书
药店收银员岗位职责
2015/04/07 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
数据设计之权限的实现
2022/08/05 MySQL