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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue.js 使用原生js实现轮播图
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实现httpclient类示例
2014/04/08 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
python单例设计模式实现解析
2020/01/07 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
自习课吵闹检讨书范文
2014/09/26 职场文书
平安家庭事迹材料
2014/12/20 职场文书
九华山导游词
2015/02/03 职场文书
文艺委员竞选稿
2015/11/19 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers