vue工程编译sass错误怎么办

vue工程编译sass错误的解决办法:1、使用镜像源“cnpm install node-sass sass-loader –save-dev”安装sass;2、在“package.json”中更改“sass-loader”版本为“”sass-loader”: “^7.3.1”,”;3、在页面中直接使用或者用@代替src即可。

vue工程编译sass错误怎么办

本教程操作环境:Windows10系统、sass-loader7.3.1版、Dell G3电脑。

vue工程编译sass错误怎么办?

解决vue使用Sass时候的报错问题

sass:

立即学习“前端免费学习笔记(深入)”;

安装:

npm config set registry https://registry.npm.taobao.org///sass-node报错的话,使用镜像源cnpm install node-sass sass-loader --save-dev 再安装一次npm install node-sass --registry=https://registry.npm.taobao.org

登录后复制

package.json中更改sass-loader版本

"sass-loader": "^7.3.1",

登录后复制

使用:

页面中直接使用或者@代替src(3.x中@无需配置,2.x中需要在webpack文件中配置)
在这里插入图片描述

问题描述:

下面这个问题是我使用sass时碰见的报错:

*!!vue-style-loader!css-loader?{“sourceMap”:true}!../../../../vue-loader/lib/style-compiler/index?{“vue”:true,”id”:”data-v-570115ee”,”scoped”:false,”hasInlineConfig”:false}!../../../../vux-loader/src/after-less-loader.js!less-loader?{“sourceMap”:true}!../../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=styles&index=0!./index.vue in ./node_modules/vux/src/components/alert/index.vue

登录后复制

解决方案
此类问题一般是缺少相关依赖而导致的,对于本例,仔细看一下报错提示信息,抓住关键词,vue-style-loader!css-loader,说明是css解析的时候出了问题。
所以,解决方案就要根据情况而定,看你使用的CSS语言是什么,是常规的 或者 less 或者 sass。

1.如果 常规 中碰到,执行

npm install stylus-loader css-loader style-loader --save-dev

登录后复制

2.如果 less中碰到,执行

npm install less less-loader --save-dev

登录后复制

3.如果 sass 中碰到,执行

npm install sass sass-loader --save-dev

登录后复制

安装依赖就行
或者

 $npm intall sass-loader --save ; $npm install node-sass --save

登录后复制

如果你不知道,好吧,你三个都执行吧?

一般只有在初始化配置的的时候才会出现这个问题,如果是已经完好的项目都会在package.json中已经配好,直接install即可。

推荐学习:《vue视频教程》

以上就是vue工程编译sass错误怎么办的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2922244.html

(0)
上一篇 2025年3月11日 18:36:45
下一篇 2025年3月1日 18:50:39

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue组件怎么传值

    传值方法:1、利用props实现父传子;2、子传父,需要自定义事件,在子组件中用“this.$emit(‘事件名’)”触发,而父中用“@事件名”监听;3、兄弟间,通过公有父元素作为桥接,结合父子props传参、子父自定义事件;4、用路由传值…

    2025年3月11日
    200
  • vite和webpack的区别是什么

    区别:1、webpack服务器启动速度比vite慢;由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。2、vite热更新比webpack快;vite在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块…

    2025年3月11日
    200
  • vue中用到es6特性有哪些

    特性:1、let和const关键字,用于声明变量;2、“for…of”循环,可迭代数据;3、Iterable,是实现可迭代协议的任何对象;4、Generator;5、默认参数;6、解构赋值语法,可以将属性/值从对象/数组中取出;7、剩余/展…

    2025年3月11日
    200
  • vue怎么在元素上增加样式

    增加方法:1、用“:class=”[‘类名’]”语句添加;2、用“:class=”[‘类名1′,’类名2’,{属性名(类名):’属性…

    2025年3月11日
    200
  • vue数据冻结有什么用

    在vue中,数据冻结“Object.freeze()”方法用于冻结对象,禁止对于该对象的属性进行修改(由于数组本质也是对象,因此该方法可以对数组使用)。对象冻结后,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不…

    2025年3月11日 编程技术
    200
  • .vue格式文件用什么软件打开

    可打开“.vue”格式文件的软件:1、webStorm,是一款JavaScript 开发工具;2、Visual Studio Code,是微软出的一款轻量级代码编辑器,免费而且功能强大,对JavaScript和NodeJS的支持非常好;3、…

    2025年3月11日
    200
  • vue的内置指令有哪些构成

    内置指令有16个:v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once、v-memo、v-is;其中…

    2025年3月11日 编程技术
    200
  • vue路由有哪几种模式有什么区别

    vue路由有三种模式:Hash、History、Abstract。区别:1、hash模式的url路径会出现#字符,其他模式不会;2、hash值的改变会触发hashchange事件,其他模式不会;3、history模式整个地址重新加载,可以保…

    2025年3月11日
    200
  • vue3改了几个生命周期函数

    vue3改了4个生命周期函数。Vue3组合式api取消了beforeCreated和created钩子函数,采用steup钩子代替,且里面不能使用this。Vue3里面的组件销毁的钩子函数由destroyed和beforeDestroy换成…

    2025年3月11日
    200
  • vue插槽解决什么问题

    vue插槽解决的问题:引入的子组件标签中间不允许写内容的。插槽(Slot)是vue为组件的封装者提供的能力;允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽;可以把插槽认为是组件封装期间,为用户预留的内容的占位符。 本教程…

    2025年3月11日 编程技术
    200

发表回复

登录后才能评论