Vue中node-sass和sass-loader版本问题

最新推荐文章于 2024-08-07 15:09:51 发布
最新推荐文章于 2024-08-07 15:09:51 发布
阅读量6.2k 收藏 3
点赞数 4
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45408876/article/details/109804134
版权
在Vue项目中，直接安装最新版的node-sass和sass-loader会导致打包失败，特别是当组件包含CSS时。问题表现为打包过程卡住，显示空白页面且无错误信息。解决方法是将sass-loader回退到7.1.0版本，先卸载现有版本，再重新安装，同时确保node-sass版本与之兼容，避免出现版本不匹配的错误，这样项目即可正常运行。
摘要由CSDN通过智能技术生成

如果直接安装node-sass和sass-loader的话，执行组件css的时候会打包失败，卡在打包至写了css的组件上，我整了一天，还好是弄好了。

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

这是直接安装SASS加载器。。
安装好后只要不运行写了css的组件，就能运行项目，写了css的项目就会打包失败。从而的到一个空页面。什么都不显示，也不报错的项目。在这里插入图片描述
CDM中就会出现打包至一半，卡起的问题
在这里插入图片描述
将该页面从路由中注释后，则能运行项目。

后面发现就是SASS加载器的问题。
在这里插入图片描述

因为直接装的SASS加载器是最新的版本，就需要降版本，于是就要重新装SASS版本，

将

最低0.47元/天 解锁文章
学习Java的小杰
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
vue项目node-sass sass-loader node 版本对应问题
web18484626332的博客
03-06 2547
本人总结了一套万能无错的版本 node 8.11.2 sass-loader 7.3.1 node-sass 4.7.2 node版本对应的node-sass sass-loader 4.1.1，node-sass 4.3.0 sass-loader 7.0.3，node-sass 4.7.2 sass-loader 7.3.1，node-sass 4.7.2 sass-loader 7.3.1，node-sass 4.14.1 使用国内镜像 npm install -g mirror-config-
vue2项目集成scss所踩的坑
weixin_44077118的博客
08-06 210
1、node版本与node-sass、sass-loader版本的对应关系，本人使用的node:12.1.0版本，node-sass:4.12.0,sass-loader:7.1.0。安装成功，但是使用npm run dev 命令编译node-sass报错，最终使用npm rebuild node-sass重新编译成功，vue文件中引入scss成功编译。坑：安装node-sass老报python错误，使用 npm i node-sass@24.12.0 --ignore-scripts。
nodejs/node-sass/sass-loader三者版本对应关系（已解决）
最新发布
ChickenBro_的博客
08-07 982
1.删除node_modules文件夹，刚拉的项目如果没有就不用删。2.删除package-lock.json、yarn.lock文件。我的nodejs：v14.21.3，，修改package.json文件。
vue2安装 node-sass sass-loader 版本
ferwagrea的博客
02-24 1970
4.运行你vue项目，如果出现报错，先删除node_modules，再npm install一次.3.去网上找node版本对应的node-sass sass-loader 版本。1.先删除已经下载的 node-sass sass-loader。我的版本是node16.14.0。2.查看node.js环境。如果出现版本不兼容的报错。
升级node版本后vue2的项目node-sass、sass-loader安装报错（14.x升级到16.x）
qiansitong的博客
08-07 1823
node-sass sass-loader
sass-loader@7.1.0“ has unmet peer dependency “webpack@^3.0.0 || ^4.0.0“.
热门推荐
A_com_Z的博客
12-04 2万+
NodeJS： sass-loader@7.1.0" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0"如何解决呢？ 可以采用的指令如下进行安装：最后进行 yarn install npm install node-sass 注意的是在同一个powerShell命令行下面，不理解的可以留下您的评论，必定解答！ ...
vue项目引入sass，node各版本对应node-sass版本
qq_33966027的博客
08-14 8755
2.删除 node_modules ，然后运行npm cache clean 或者npm cache clean --force;再重新安装需要的依赖包。1.删除 node_modules，再重新进行安装需要的依赖包(npm install 或者 cnpm install)；下面两条命令任选其一执行安装即可，主要是包管理器不同。另附上node各版本对应的可用node-sass版本。...
vue-cli4.X 中 选择sass时dart-sass 和node-sass有什么区别
萧萧的博客
07-07 2469
区别： node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass dart-sass 是用 drat VM 来编译 sass 选择： 推荐 dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass 因为国情问题经常装不上. 如果选择node-sass，很大概率会遇到build失败的情况，因为安装过程中是需要拉二进制的包下来的，但是网络问题，这个包一般拉不下来，所以会导致后续的一系列报错 ...
详解在vue-cli项目中安装node-sass
12-01
3，可以通过淘宝的npm镜像安装node-sass，解决以上问题。 npm install -g cnpm --registry=https://registry.npm.taobao.org （安装淘宝镜像） cnpm install node-sass --save （使用淘宝镜像安装node-sass）
vue安装和使用scss及sass与scss的区别详解
12-10
1. 安装依赖：npm install node-sass sass-loader -D 2. webpack.base.conf.js文件 module: { { //手动添加这一条，相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} } 3. 在.vue文件中使用 <style scoped lang="scss"> .box{ width: 100%; :hover{ color: red; } } </style> 下面看下sass与scss的区别 用了很久css预编译器，但是一直不太清
vue node、node-sass、sass-loader 的版本兼容问题
且听风吟的博客
11-16 1275
node-sass和node版本是否对应：
node，node-sass,sass-loader之间的版本关系
一名普通码农的菜地
01-31 4268
安装配置node-sass 以及 sass-loader想必是很多前端的噩梦–一不小心又不成功还得装个半天。下面说一下这个问题。这样的问题，这个也是因为三者关系对不上。
sass，sass-loader的使用
weixin_48462578的博客
03-24 4066
安装 cnpm install sass sass-loader -D 主要代码 { test:/.css$/, use:[ 'style-loader', 'css-loader', 'sass-loader' ] }
node-sass sass-loader安装或者scss文件保错
luback的博客
01-10 604
如果遇到如图的报错信息或者npm install 也很会出现sass的单词报错，那么应该就是你node版本和的node-sass sass-loader版本有问题导致。找到node-sass sass-loader两个安装文件，版本号修改成如下，保存package.json文件后，VScode软件的话，ctrl+F 搜索框 搜索sass。打开package.json文件。再npm install就可以了。
【sass】sass、sass-loader依赖包下载、卸载
weixin_46368797的博客
08-03 1600
sass、sass-loader下载
node\node-sass\sass-loader对应版本
sinat_29304113的博客
02-18 1万+
node版本：v14.18.3 node-sass版本：4.7.2 sass-loader版本：7.3.1 node版本：16.13.1 node-sass版本：6.0.1 sass-loader版本：10.0.1
node node-sass sass-loader版本对应问题，对于npm编译大家经常遇到这个问题
宁波阿成的博客
12-15 5526
node node-sass sass-loader版本对应问题，对于npm编译大家经常遇到这个问题
vue下载node-sass
07-21
Vue.js本身是一个前端框架，它并不直接支持像Node.js这样的服务器端运行环境，而`node-sass`是用于在Node.js中处理Sass（一种CSS预处理器）的库。如果你想在Vue项目中使用Sass，你需要在安装Vue之后，在Node.js环境中完成以下步骤： 1. 首先，确保你已经全局安装了Node.js和npm (Node Package Manager)。你可以访问 https://nodejs.org 下载并安装。 2. 打开命令行工具（如Terminal或CMD），进入你的Vue项目目录。如果还没有创建Vue项目，可以使用Vue CLI（Vue脚手架）来创建一个新项目： ``` npm install -g @vue/cli vue create my-project-name cd my-project-name ``` 3. 进入项目文件夹后，安装Sass和Vue相关的Sass loader，比如`sass-loader`和`node-sass`（注意：由于安全原因，`node-sass`不再推荐使用，推荐使用`@loaders/babel-sass-loader`结合`dart-sass`）： ``` npm install sass-loader node-sass vue-cli-plugin-sass --save-dev ``` 或者如果使用的是v4版本以上的Vue CLI，并且你想切换到`dart-sass`： ``` npm install vue-cli-plugin-sass sass-loader --save-dev npm install -D dart-sass ``` 4. 添加Sass配置到`.vue`文件的`build`标签中，例如在`src/main.js`或`config/index.js`中设置Sass插件： ```javascript // 如果在vue.config.js中 module.exports = { chainWebpack(config) { config.module.rule('scss') .test /\.s[ac]ss$/i .use('sass-loader') .loader('@vue/cli-service/node_modules/sass-loader') .options({ implementation: require.resolve('dart-sass'), }); } }; // 或者如果你在配置.sassrc.js const path = require('path'); module.exports = { loaderOptions: { sass: { data: `@import "~@/styles/main.scss";`, // 引入你的Sass文件 includePaths: [path.resolve(__dirname, '../node_modules')], compiler: 'dart-sass', // 使用dart-sass }, }, }; ``` 5. 然后在项目中创建`.scss`或`.sass`文件编写样式，并通过`<style lang="scss">`或`<style scoped lang="scss">`引入它们。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值