vue中使用sass及解决sass-loader版本过高导致的编译错误问题

目录
  • 使用sass及解决sass-loader版本过高导致编译错误
    • 安装依赖包
    • 使用
    • 解决编译错误
  • 安装sass（规避因版本过高报错）
    • 安装的两个命令
    • 配置文件
    • 样式标签更改

使用sass及解决sass-loader版本过高导致编译错误

安装依赖包

安装node-sass、sass-loader和style-loader：

npm i node-sass sass-loader style-loader -D

使用

<style scoped lang="scss">
</style>

解决编译错误

操作以上步骤后，运行，发现报错。原因是sass-loader版本过高，node-sass和sass-loader不兼容。解决办法：卸载当前版本的sass-loader，安装指定版本：

npm uninstall sass-loader  //卸载
npm install sass-loader@7.3.0  //安装指定版本

安装sass（规避因版本过高报错）

安装的两个命令

npm install sass-loader@7.3.1 --save-dev
npm install --save-dev node-sass

配置文件

打开build文件夹下的webpack.base.conf.js

找到module.exports里的module，在rules里添加下面的配置：

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

样式标签更改

<style lang="scss">

然后 npm run dev 重启一下

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue中使用less/sass及使用中遇到无效的问题

    一:使用方法 在vue官方脚手架中,即vue-lci搭建的项目中,可以轻易的使用less/sass. 先使用npm下载依赖,命令行为'npm install less less-loader –save',再在webpack.base.conf.js中添加rules对象: { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }` 然后在style标签中添加lang="less"即可,或者直

  • 在vue-cli创建的项目中使用sass操作

    安装sass-loader node-sass cnpm install sass-loader node-sass -D -D是--save-dev的缩写 安装之后有的会报错: this.getReslove is not a function.... 这时因为sass-loader的版本太高的原因,在package.json 长修改sass-loader的版本低于8.0,删除node_modules文件加,重新安装就ok了 补充知识:vue-cli的项目 style lang="scss&q

  • 在vue项目中使用sass的配置方法

    在vue项目中使用sass的配置方法

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue $ npm install 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 4.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /

  • 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&quo

  • vue中使用sass及解决sass-loader版本过高导致的编译错误问题

    目录 使用sass及解决sass-loader版本过高导致编译错误 安装依赖包 使用 解决编译错误 安装sass(规避因版本过高报错) 安装的两个命令 配置文件 样式标签更改 使用sass及解决sass-loader版本过高导致编译错误 安装依赖包 安装node-sass.sass-loader和style-loader: npm i node-sass sass-loader style-loader -D 使用 <style scoped lang="scss"> &l

  • vue中利用iscroll.js解决pc端滚动问题

    项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖[vertical]项滚动条,如果pc端出现横向滚动条[horizontal],在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮[scrollerbar]展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动. 二.描述 现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直

  • vue中父子组件传值,解决钩子函数mounted只运行一次的操作

    因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. beforCreate(创建之前) Created(创建之后) beforMount(载入之前) Mounted(载入之后) beforUpdate(更新之前) Updated(更新之后) beforDestroy(销毁之前) Destroyed(销毁之后) activate(keep-alive组

  • Vue中安装element-ui失败问题原因及解决

    目录 Vue中安装element-ui失败 解决方式 elementui安装不上,报错问题 解决方法 总结 Vue中安装element-ui失败 开启npm.cmd,输入npm install element-ui -S命令,正常情况会安装成功,但也有安装不成功的情况, 若安装不成功,则检查npm和vue是否安装成功,使用: npm -v vue -V ps:这里的V大写 来查看版本,看不到版本号,便重新安装npm或vue. 解决方式 npm install npm -g elementui安装

  • vue中使用$http.post请求传参的错误及解决

    vue中使用$http.post请求传参的错误及解决

    目录 使用$http.post请求传参的错误 vue post请求之坑 解决方法 使用$http.post请求传参的错误 在使用$http请求后台,照常我们在后端 使用注解@PostMapper或者 @RequestMapping(value = “XXXX”,method = RequestMethod.POST)接受请求 handleAdd(node) { this.$http.post("/item/category/addCategory",{ node:node }) .th

  • vue中的eventBus会不会产生内存泄漏你知道吗

    vue中的eventBus会不会产生内存泄漏你知道吗

    目录 引入 内容 eventBus在vue中的实现 例子:使用eventBus 例子:不及时取消订阅 其它注意事项 总结 eventBus是在vue中经常用来解决跨组件消息传递的问题,但对它的使用要特别注意,否则会产生很严重的后果. 引入 本文介绍了eventBus的实现原理,并介绍它如何在vue中使用,并举了一个具体的例子来说明,如果使用不当,它会造成内存泄漏. 要注意eventBus并不是前端的概念. 由greenrobot [1] 组织贡献(该组织还贡献了greenDAO),一个Andro

  • 基于vue中css预加载使用sass的配置方式详解

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"

  • Vue中使用sass实现换肤功能

    先给大家展示下效果图: 先给大家看一下目录和主要文件: 解释一下主要文件: base.scss: 一些通用样式文件. mixin.scss: 定义mixin方法的文件. varibale.scss: 颜色,字体,背景的配置文件 以下就拿封装的head组件代码来展示以下实现逻辑,现在大家主要是来理解,不要着急复制代码,在文章最后会贴出三个主要文件的代码的. 为什么会在 background:$background-color-theme; 地方标注错误? 如果之前用过sass的同学可能会知道,这样

  • vue中使用/deep/失效的解决方法

    1. 若是没有使用像less, sass等这样的css预处理器, 那么是只能使用 >>>这样的css深度选择器 <style scoped> .box >>> el.dialog { } </style> 2. 若是使用了css预处理器,则可以使用/deep/, 如果/deep/ 无效,则使用 ::v-deep <style scoped lang="scss"> .box /deep/ el.dialog { }

随机推荐