在Vue项目中使用sass以及解决sass-loader版本过高导致的编译错误

最新推荐文章于 2024-08-09 07:11:53 发布

水木Moira

最新推荐文章于 2024-08-09 07:11:53 发布

阅读量5.2k

点赞数 4

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44524835/article/details/109275870

版权

一、安装依赖包

安装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  //安装指定版本

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

水木Moira

关注关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

解决vue cli4升级sass-loader(v8)后报错问题

10-15

在使用Vue CLI 4的项目中，sass-loader是一个重要的工具，用于将Sass或SCSS预处理器转换为CSS。然而，随着技术的更新，sass-loader在版本8中引入了新的API，这可能会导致升级后出现报错问题。当开发者尝试升级到sass...

css-loader,sass-loader等编译失败的原因

weixin_34220963的博客

03-13

4156

一般出现下面的情况，是样式解析失败导致。样式解析失败是因为，依赖没装好或没装 ERROR in ./node_modules/_css-loader@0.28.11@css-loader?{"minimize":false,"sourceMap":true,"alias":{"../img":"../static/img"}}!./node_modules/vue-loader/lib/style...

1 条评论您还未登录，请先登录后发表或查看评论

VUE 项目引入sass后启动报错 TypeError [ERR_INVALID_ARG_TYPE]: The “path“ argument must be of type string 解决方法

TianYaLangZi_123的博客

12-28

851

我是用vue cli创建的项目，vue cli版本是4.5.9 vue文件里面使用lang="scss"，各种报错，解决方法是：肯定要安装sass-loader和node-sass 结果还是老是报错：TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string。查老半天，各种试，结果就是版本问题把package.json里面node-sass和sass-loader版本改成："node-sass"..

sass-loader 使用教程

最新发布

gitblog_00022的博客

08-09

827

sass-loader 使用教程 sass-loaderCompiles Sass to CSS项目地址:https://gitcode.com/gh_mirrors/sa/sass-loader 项目介绍 sass-loader 是一个用于 Webpack 的加载器，它允许你将 Sass 或 SCSS 文件编译成 CSS。通过 sass-loader，你可以利用 Sass 的强大功能来编写更简...

sass依赖包版本问题: The “path“ argument must be of type string. Received undefined vue sass

Clearlove_8的博客

12-21

956

The “path“ argument must be of type string. Received undefined vue sass 花费了我两个小时处理这个问题 1.这是vue项目（由vue-cli创建）引入sass后，打包项目出现的错误。这个错误是sass-loader版本造成的解决方案：在package.json中将 “sass-loader”:" 10.0.1"版本修改为"sass-loader": “^7.3.1”,然后重新npm install 2.创建完这个文件以后，又出现了新的错

vue中使用sass 及 vue中node-sass 和 sass-loader 不兼容的问题

LANCE的博客

12-08

4995

最近在学习vue框架，想在vue中使用sass写样式，但在vue中安装的node-sass 和 sass-loader后，在style中写样式总是报错。下面是我对这个问题的一点记录

vue node、node-sass、sass-loader 的版本兼容问题

且听风吟的博客

11-16

1295

node-sass和node版本是否对应：

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

10-14

首先，为了在Vue CLI项目中使用Sass，我们需要安装两个关键的依赖包：`sass-loader` 和 `node-sass`。`sass-loader` 是一个Webpack加载器，用于将Sass源代码编译成CSS，而`node-sass`是Sass的Node.js绑定，提供Sass...

在vue项目中使用sass语法问题

10-16

在Vue项目中使用Sass语法是前端开发中的一个重要话题，尤其对于希望提高CSS组织性和复用性的开发者来说。Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器，它扩展了CSS的功能，支持变量、嵌套规则、...

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

10-14

在Vue项目中，Sass是一种常用的预处理器，它允许开发者使用更高级的语法来编写CSS。然而，在实际开发过程中，可能会遇到Vue使用Sass时的报错问题。本篇文章将详细解析这类问题的原因并提供相应的解决策略。首先，...

成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass，以及安装node-sass可能遇到的版本冲突问题

日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导

01-04

1万+

成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass，以及安装node-sass可能遇到的版本冲突问题

成功解决node、node-sass和sass-loader版本冲突问题

weixin_41649773的博客

11-22

1695

执行npm install node-sass时再次出现错误：node-sass@4.14.1 postinstall: `node scripts/build.js`。当前node-sass版本（4.7.2）支持nodejs版本为9以下，window64位与32位，而我的电脑是win64，但是我安装的nodejs版本是（14.17.3），远远高于当前node-sass支持的版本。卸载当前nodejs，并重新安装版本为9以下的nodejs。从官方文档中找到node与node-sass的版本对应关系。

安装 node-sass 和 sass-loader 的过程及各 node 版本对应的 node-sass 版本号

热门推荐

weixin_64948861的博客

02-27

2万+

其二、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?原文链接：https://blog.csdn.net/github_36665118/article/details/127811607。认准对应的node版本号确定好一个后来回切换sass-loader 版本即可，容错率很高；

怎么查看 node-sass 和 sass-loader 的各个版本的对应关系？

qq_41177135的博客

05-27

6511

怎么查看 node-sass 和 sass-loader 的各个版本的对应关系？

node node-sass sass-loader版本对应问题，对于npm编译大家经常遇到这个问题

宁波阿成的博客

12-15

5570

node node-sass sass-loader版本对应问题，对于npm编译大家经常遇到这个问题

踩坑：Vue sass-loader V10配置全局变量

米斯特曹

10-09

7677

本文字数：349 预计阅读时间：1.5分钟问题：Vue中使用 scss 配置全局变量时报错 ~ 版本信息： Vue 2.6.11 Cli4.5.00 sass-loader10.0.2 node-sass4.14.1 Sass、Less是强化 CSS 的辅助工具，它并不是一门语言，但能有效提高开发效率，最直白的感受是大幅度减少了各种寻找Class，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mix...

npm中node-sass以及sass-loader版本不匹配问题

Unclear_cat的博客

12-25

2340

npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!npm ERR!

【系统学习css】scss和sass以及 less的关系，node-sass、dart-sass和sass-loader是啥

qq_17335549的博客

05-11

2083

每日鸡汤，每一个想要学习的念头都是未来的你向自己求救首先我们在package.json中安装的依赖都是关于sass的，但是在style标签中使用的时候一般是用<style lang="scss> 这是为什么呢，我们来看一下sass和scss的关系。参考链接 sass和scss其实是一样的css预处理语言，scss是sass 3引入的新语法，所以就是说scss隶属于sass，scss语法完全兼容了css3, 并且继承了sass的强大功能。区别是 sass 是有严格缩进风格的，不

sass，sass-loader的使用

weixin_48462578的博客

03-24

4069

安装 cnpm install sass sass-loader -D 主要代码 { test:/.css$/, use:[ 'style-loader', 'css-loader', 'sass-loader' ] }

为 vue 项目添加 sass-loader 依赖

06-06

在 Vue 项目中添加 Sass-loader 依赖，可以通过以下步骤完成： 1. 首先，打开终端并进入你的 Vue 项目根目录。 2. 然后，使用以下命令来安装 Sass-loader 和 node-sass： ``` npm install sass-loader node-sass --save-dev ``` 3. 安装完成后，在项目的 build/webpack.base.conf.js 文件中，找到 module.exports 中的 rules 数组。 4. 在 rules 数组中添加以下规则： ```javascript { test: /\.s[a|c]ss$/, loader: 'sass-loader', exclude: /node_modules/ } ``` 5. 保存文件并退出编辑器。 6. 重新启动你的 Vue 项目，Sass-loader 就已经成功添加到你的项目中了。希望这个步骤可以帮助你成功添加 Sass-loader 依赖。