您好,登录后才能下订单哦!
这篇文章主要介绍“vue-cli3.x配置全局scss报错怎么解决”,在日常操作中,相信很多人在vue-cli3.x配置全局scss报错怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue-cli3.x配置全局scss报错怎么解决”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
在vue.config.js配置的时候用prependData不要用data
sass: { // 根据自己样式文件的位置调整 /旧版的scss-loader 是data 新版的是 prependData prependData: `@import "@/styles/global.scss";` },
如果没有的话,则自己在根目录新建一个即可
module.exports = { css: { loaderOptions: { sass: { data: `@import "@/styles/_variable.scss";` } } } }
注意:如果编写完以上代码,重启项目后出现这个错误:
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官网中看到此说明。
因此,我们需要将配置代码修改成如下样式:
css: { loaderOptions: { sass: { prependData: `@import "~@/styles/_variable.scss";` } } }
到此,关于“vue-cli3.x配置全局scss报错怎么解决”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。