node-sass sass-loader vue scss 安装填坑

最新推荐文章于 2024-03-10 15:36:42 发布
最新推荐文章于 2024-03-10 15:36:42 发布
阅读量991 收藏 2
点赞数 2
分类专栏： Q&A 文章标签： sass css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38779534/article/details/108681003
版权

新接手的项目里面没有用到css的扩展语言sass或者less，像我这种咸鱼，怎么可能老老实实一个个去写样式呢，再说装一个也很快啊，当然是装一个啊，等我戴个耳机，听个小曲麻溜地给它装上，准备投入到开发中。

没想到哇，生活总是喜欢在我开开心心的时候绊我一跤，而我每次都华丽丽地摔了，唉，又一次被生活按在地上摩擦。

在这里插入图片描述

没办法，咸鱼只能向生活屈服，并开始向某度求助。

刚开始看sass官网是直接npm install sass
装完之后提示我要装sass-loader
我也听话地装上了，看着是装成功了呀

在这里插入图片描述在这里插入图片描述
但是竟然报错了
但是我就很迷了啊
你说装失败就装失败吧
怎么还整个项目都跑不起来了
在这里插入图片描述
于是各种某度…各种试水…

一上午过去了…并没有解决问题…

于是我抛下我的自尊心…抛下我的面子…抛下我的铠甲…

向我对面的实习生小朋友求助：“小朋友，你遇到过项目装了sass装不成功然后项目跑不起来了吗”
“没有吧，装不了不就是用不了而已吗，不用就好了，怎么会跑不起来了”
“嘿嘿，那你往你项目上装一个，看看能不能跑起来”

过了一会，他的项目也跑不起来了哈哈哈哈哈

后面他告诉我一个他的终极大法，说他以前也经常遇到node-sass的版本问题，用这个方法都能解决，就是先把之前装的node-sass卸载，再装上sass-loader，再装node-sass的淘宝镜像，就能完美解决问题 ，跑一下下面三句吧…

npm uninstall node-sass
npm install sass-loader
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

在这里插入图片描述
终于又活过来了… 我也跟着活过来了…

Muizai
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
node-sass 4.12、4.14.1、5 node-sass-loader node_modules 安装包
07-07
直接复制至node_modules npm run dev 即可
node-sass和sass-loader对用版本问题可解决相关报错
weixin_46029637的博客
07-27 488
node-sass和sass-loader对用版本问题可解决相关报错，如果初次安装sass-loader依赖后就报错，那很大概率应该是由于版本问题导致。这个样安装过程中报错 是因为 node-sass 版本太高我这个默认node-sass直接就是9.0所以换成如下方法即可。
node、 node-sass 和sass-loader的版本对应问题
最新发布
极客神殿
03-10 2298
错误产生原因：node、 node-sass 和sass-loader的版本对应问题。
node_modules.7z "node-sass": "^4.13.1",
03-29
解决 node-sass 报错安装失败的bug 这个直接下载好的可以拿到项目中直接替换node_modules包然后在下载其他组件 npm i 看到了就是缘分可以看 https://blog.csdn.net/weixin_43365995/article/details/105182974 博客去解决问题。但是淘宝镜像和npm下载node-sass会下载不上有点坑要多试几次，嫌麻烦的可以直接拿去用
lint-sass-vue：适用于Vue.js的Atom linter
02-05
这个插件是一个分支，为提供了的。 它将解析带有样式标签的.vue文件，并适用于Sass或SCSS： < template> <!-- your tamplate here --> </ template> < script > export default { props : { // ... } , } ; </ script > < style lang =" scss " scoped > /* your rules here */ </ style > 插件安装 apm install lint-sass-vue .sass-lint.ym
坑爹的scss：怎样在vue项目安装使用scss（node-sass和sass-loader遇到的所有坑）
南北极之间
03-11 4438
1，安装： npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的！ 2，配置： webpack.base.conf.js找不到？可以在build文件夹里面找到 在webpack.ba...
安装 node-sass 和 sass-loader 的过程及各 node 版本对应的 node-sass 版本号
weixin_64948861的博客
02-27 1万+
其二、有兴趣的话，可以多多关注这个专栏(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、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass，以及安装node-sass可能遇到的版本冲突问题
做笔记\记录遇到的程序bug
01-04 1万+
成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue项目中安装node-sass，以及安装node-sass可能遇到的版本冲突问题
前端开发中webpack常用的node-sass、sass-loader、style-loader等区别作用
qq_43886365的博客
09-30 3217
前端开发中webpack常用的node-sass、sass-loader、style-loader、style-loader等区别作用
解决sass-loader和node-sass版本冲突问题（太难了）
热门推荐
码瘾的空间
08-06 4万+
  太难了，两天没有学习了，这个问题卡了很久，差点就放弃了，今天终于解决了，继续学习Vue！ 报错信息1： ERROR Failed to compile with 6 errors 7:45:21 PM error in ./src/components/advanceDemo/toastCom.vue?vue&type=st
node版本升级：与node-sass、sass-loader版本不兼容问题以及npm install时报错问题解决方法
Zaralike的博客
07-26 9346
node 版本与node-sass、sass-loader版本不兼容问题 npm install 时报错 run `npm audit fix` to fix them, or `npm audit` for details
vue2-sass-config:Vue2（不是Vue3）SASS配置示例
05-19
vue2-sass-config Vue2（不是Vue3）SASS配置示例信息此模板是为Vue2项目设计的，与Vue3不兼容； sass-loader受限制，因为11+要求WebPack 5；
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文件...
vue-cli如何添加less 以及sass
12-01
npm install sass-loader --save-dev 如果是淘宝镜像直接运行cnpm是一样的效果 然后在组件或者视图中给样式加上语言就可以了 <style lang="sass" scoped> ..... </style> 这里需要说明一下scoped是让...
rollup-plugin-sass：滚动.sass文件
02-05
汇总插件安装npm install rollup-plugin-sass -D用法// rollup.config.jsimport sass from 'rollup-plugin-sass' ;export default { input : 'index.js' , output : { file : 'bundle.js' , format : 'cjs' , } , ...
Excel文件导出，前端导出或者后端导出
weixin_38779534的博客
02-19 7456
一般来讲导出都是后端完成逻辑，给接口给到前端，前端调用接口简单处理导出就可以了，但是上次我们公司做内部使用的后台，认为数据量小，前端导出实时更快，于是也有了前端导出的方式，做个总结。 先过一下后端导出的做法以及需要注意的一些点： //我是事先封装了一个请求的方法，然后是正常的请求，只是需要注意的是要加一个responseType: 'blob',因为后端返回的就是一个blob类型 export function getDetailExcel (params) { return request({
Computed property “total“ was assigned to but it has no setter.
weixin_38779534的博客
08-24 1499
当你想要在模板中多包含此处的翻转字符串时，或者是进行复杂的逻辑的时候，我们往往会在computer里面去处理。 <span>{{total}}</span> <script> data(){ return { num1:0, num2:10 } }, computer:{ total() { return this.num1 + this.num2 } } </script> 以上的例子total是依赖于num1和num2 的值，所以当我
开发环境（devDependencies）和生产环境（dependencies）的区别
weixin_38779534的博客
07-29 1132
/package.json 像webpack，gulp等打包工具，这些都是我们开发阶段使用的，代码提交线上时，不需要这些工具，所以我们将它放入devDependencies即可，但是像jquery这类插件库，是我们生产环境所使用的，所以如要放入dependencies，如果未将jquery安装到dependencies，那么项目就可能报错，无法运行，所以类似这种项目必须依赖的插件库，我们则必须打入dependencies中。 在安装的时候 npm xxx --save / npm xxx -S 就是会添加到
"node-sass": "^4.9.0" 怎么安装
08-10
根据引用中的信息，您可以通过以下步骤来安装 "node-sass": "^4.9.0": 1. 首先，确保您已经安装了 Node.js 环境。您可以在终端中运行以下命令来检查 Node.js 的版本：`node -v`。如果您没有安装 Node.js，请按照官方网站上的说明进行安装。 2. 在终端中，进入您的项目目录，并运行以下命令来安装 "node-sass"： ``` npm install node-sass@4.9.0 ``` 3. 如果安装成功，您将在您的项目目录下的 `node_modules` 文件夹中看到一个名为 `node-sass` 的文件夹。 注意：在安装 "node-sass" 之前，确保您已经正确配置了项目的环境，并且已经在项目目录下运行了 `npm init` 命令来初始化您的项目。 希望这些步骤能够帮助您成功安装 "node-sass"。如果还有其他问题，请随时提问。123 #### 引用[.reference_title] - *1* [[ npm install:run script: error ] node-sass@^5.0.0 scripts.postinstall run “node scripts/build.js](https://blog.csdn.net/Jone_hui/article/details/121324825)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] - *2* [解决Error: Cannot find module ‘node-sass‘或者error node-sass@4.9.0 postinstall: `node scripts/...](https://blog.csdn.net/qq_40752902/article/details/118560046)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] - *3* [mac电脑安装依赖 node-sass版本不支持问题 Error: node-sass@4.9.0 postinstall: `node scripts/build.js`](https://blog.csdn.net/weixin_52827704/article/details/129186278)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值