vue项目中使用scss出错解决方法

已于 2022-07-23 18:23:53 修改
阅读量5.3k 收藏 4
点赞数 1
分类专栏： vue实现的功能及遇到的问题解决【纪录】 文章标签： 1024程序员节 vue.js
于 2021-10-24 14:32:37 首次发布
张砚博
本文链接：https://blog.csdn.net/qq_47272950/article/details/120933801
版权
在Vue项目中遇到使用SCSS时出现'`this.getOptions is not a function`'的错误。问题源于最新版的`sass-loader`和`node-sass`的不兼容。解决方法是卸载这两个包，然后安装较低版本，例如通过npm运行相应的安装命令。
摘要由CSDN通过智能技术生成

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。[[点击跳转到网站。]]

vue 使用scss报错 this.getOptions is not a function

通过npm安装sass

npm install node-sass
npm intall sass-loader

上面命令安装的是最新版的，出现错误的原因就是安装最新版的导致不兼容
在这里插入图片描述
在这里插入图片描述

解决方案就是卸载sass-loader以及node-sass，

了解本专栏 订阅专栏 解锁全文 超级会员免费看
码上流星&洒下星辰
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
vue项目中安装使用scss 报错解决
weixin_43983960的博客
02-15 2318
在vue2项目中使用sass来方便编写css样式，所以需要借助安装sass预编译器来进行处理css，在安装node-sass过程中出现无法安装的问题。
【详细】Sass安装、查测、更新、卸载（windows版）
糖长老莫小贝的博客
03-09 4781
我们在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，大家可以到 Ruby 的官网下载对应需要的 Ruby 版本，建议我们这些新手先下载官网建议的2.5.3-1(x64)版本。 Ruby 安装文件下载好后，可以按应用软件安装步骤进行安装 Ruby。在安装过程中，个人建议将其安装在 C 盘下，在安装过程中选择第二个选项（不选中，就会出现编译时找不到Ruby环境的情况），如下图所...
vue中的node-sass安装问题
qq_34412668的博客
08-31 453
最近安装node-sass总是失败，正确的解决方式（失败的原因是因为版本号和node.js的版本号不对应） 1、卸载： cnpm uninstall node-sass 2、安装： cnpm install node-sass@4.14.1 3、运行：cnpm run dev
当 SCSS 编译出现错误时，有哪些常见的排查和解决方法？
最新发布
xy520521的博客
07-17 480
检查拼写错误：检查代码中是否存在拼写错误，比如拼写错误的变量名或混合器名。检查错误提示：查看错误提示信息，并仔细阅读错误消息，以了解错误的原因。检查混合器使用：确保混合器的参数正确传递，并且混合器已经定义。检查变量定义：检查变量是否定义正确，并且在使用前已经定义。检查注释使用：注释可能导致编译错误，检查注释是否正确闭合。检查函数使用：确保函数的参数正确传递，并且函数已经定义。
Vue scss 引入变量报错
qq_30436011的博客
09-26 1748
官网css引入配置 参考文章 sass/scss篇 sass/scss文件与vue组件样式代码 /* variable.scss */ $color: orange; // vue组件内的style标签，将要使用上述变量的地方 <style lang="scss"> .scss div { color: $color; } </style> sass 全局变量引入方法一 使用css.loaderOptions 此处友情提示 sass-loader v7 之前使
Vue 报错 之 Syntax Error: TypeError: this.getOptions is not a function
热门推荐
仙魁XAN
10-29 2万+
IntellJ IDEA 基础之 创建 SpringBoot 整合 SSM 框架的 Maven 工程简单整理 目录 IntellJ IDEA 基础之 创建 SpringBoot 整合 SSM 框架的 Maven 工程简单整理 一、简单介绍 二、报错现象 三、问题分析 四、问题处理 一、简单介绍 Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。 本节介绍，Vue 运行时报错 Syntax Error: TypeError: this.getOptions ...
vue中使用scss报错问题记录
阿友友的博客
11-22 871
最近在项目中按照如下步骤使用sass时发现可以成功安装，代码中使用会报错。使用低版本的安装后可以成功运行。
vue 报错
weixin_46017937的博客
03-03 623
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. const path = require(‘path’); const VueLoaderPlugin = require(‘vue-loader/lib/plugin’...
vue3 使用scss
qq_44146522的博客
05-17 1536
如果报这个错 就是版本过高 解决方法：删除之前安装失败的包 npm uninstall node-sass // 卸载 npm uninstall --save sass-loader // 卸载 npm uninstall less-loader //安装 npm install less-loader@4.14.1 //安装 第一次安装的看这里 npm install node-sass --save npm install sass-loader --save //...
在vue-cli 2.x中全局使用scss文件，以及相关报错
CILOCILO
02-05 1163
在vue-cli 2.x中全局使用scss文件 node-sass 安装失败 node-sass运行时报错Module build failed: TypeError: this.getResolve is not a function at Object.loader
详解如何在vue中使用sass
08-30
本篇文章主要介绍了详解如何在vue中使用sass，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3.0 使用scss
05-01
从使用上来看，Vue3.0 中使用 SCSS 非常简单，只需要在项目中安装相应的依赖，并在组件中书写 SCSS 样式即可。在Vue组件中使用 SCSS 需要在 style 标签内加入 lang="scss" 属性，然后就可以愉快的使用 SCSS 了。 ...
vue项目使用deep语法报错并且无法启动项目最佳最完美解决方案
m0_67401055的博客
03-09 1万+
vue项目使用/deep/语法报错 最近使用vue创建后台管理系统，在改变饿了么组件样式时，使用/deep/样式穿透 压根不生效，而且终端还会报错，之前可是可以随便用/deep/的，一下子就给整懵逼了~，先来看看报错信息长啥样： 然后当你去各种百度会发现遇到同样问题的人还挺多，而且绝大多数出现的时间都是在2020年期间开始很多人出现这类问题： 然后最多的答案无非就是使用::v-/deep/ 来替换/deep/，确实有效，但是会不能使用scss嵌套写法的问题，不然样式嵌套的子元素样式不会生效如图： 所以只能
sass-loader 和 node-sass 替换成sass解决冲突问题
jiudenggushijingguo的博客
03-07 1287
sass-loader node-sass版本问题
npm 常见命令 安装 卸载 查看版本
qq_34525691的博客
09-06 356
npm 常见命令 安装 卸载 查看版本 npm list // 查看本地已安装模块清单 npm list [packageName] // 查看本地已安装模块版本 npm info [packageName] //查看模块的详细信息 包括各版本号等 npm view [packageName] version // 查看模块远程最新版本 npm view [packageName] versions // 查看模块远程所有版本 npm install [packageName] //安装模块 npm ins
VUE中如何使用sass
weixin_44020340的博客
03-16 296
VUE中如何使用sass 首先需要下载 npm install node-sass --save-dev 这样下载应该是下载最新的版本，可能会有些不兼容 npm install style-loader --save-dev npm install sass-loader --save-dev 当出现下面的情况的时候就是版本不兼容了 这时候我们要先把不兼容的先卸载 npm uninstall node-sass 卸载这个 npm install node-sass@4.14.1 安装可以兼容
sass与less的区别及卸载sass改为less
qq_58034921的博客
12-03 1752
将自动安装的sass卸载后改为less步骤，第一步，移除sass相关依赖包，第二步，安装less相关依赖包，第三步，检查报错源，第四步，sass文件替换成less 第二步，安装less相关依赖包 第三步，检查报错源注意less跟sass的区别，这里简单提几个 第四步，sass文件替换成less注意不是所有的标签上都需要加上lang="less",有嵌套、变量和计算、Mixin代码片段，循环等的加上即可，且不要一次性所有文件都换成less,要一个一个跑，不然不好
node sass卸载_node安装与卸载方法
weixin_39760721的博客
12-23 1万+
mac环境下，pkg包安装验证> which node/User//.nvm/versions/node//bin/node复制代码> node -vv10.16.3复制代码pkg卸载sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}复制代码brew 安装nod...
vite的vue项目中使用scss
05-30
要在Vite的Vue项目中使用SCSS，您需要遵循以下步骤： 1. 安装sass和sass-loader依赖： ```bash npm install sass sass-loader -D ``` 2. 在Vite配置文件（vite.config.js）中添加以下内容： ```javascript import vue from '@vitejs/plugin-vue' export default { plugins: [vue()], css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/variables.scss";` } } } } ``` 这将告诉Vite使用SCSS预处理器，并导入指定的变量文件。 3. 创建一个名为variables.scss的文件，并在其中定义您的变量： ```scss $primary-color: #007bff; $secondary-color: #6c757d; // 其他变量... ``` 4. 在Vue组件中使用SCSS： ```vue <template> <div class="example"> <p class="primary-text">Hello, world!</p> </div> </template> <style lang="scss"> .example { background-color: $primary-color; .primary-text { color: $secondary-color; } } </style> ``` 这将使用在配置文件中导入的变量，并将其应用于样式中。 希望这能帮助到您！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码上流星&洒下星辰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值