vue-cli3.0新建项目，卡在node-sass后创建失败

最新推荐文章于 2023-07-25 11:14:16 发布
最新推荐文章于 2023-07-25 11:14:16 发布
阅读量3.4k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 踩坑 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_31393401/article/details/82345080
本文介绍了解决Vue CLI 3.x环境下因node-sass安装失败导致项目创建失败的问题。通过配置yarn下载node-sass二进制包的镜像地址，可以有效避免下载失败的情况。

表现：

vue create时，若在依赖中勾选了 CSS Pre-processors SCSS/SASS，，之后下载依赖时会卡在node-sass...一段时间后报错创建失败

原因：

vue-cli3.0默认使用yarn包管理工具而不是原来的npm，而由于众所周知的原因，yarn中node-sass，如果你不翻墙，默认下载极大可能会失败

解决方法

配置下 node-sass 的二进制包镜像地址就行了
命令行输入：yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
然后你就可以愉快地玩耍vue-cli3.0啦~

vue-cli2.0和vue-cli3.0前后版本切换办法以及两个版本同时存在
qq_40663855的博客
03-12 5309
系列文章目录 上一篇 node.js 安装完成之后，有需要要切换vue-cli2.0和vue-cli3.0前后版本，在此记录两个版本同时处理使用的方法。 上一篇：Node.js图文安装教程以及环境配置 文章目录系列文章目录一、vue-cli脚手架3.0前后版本切换办法1）、3.0 以下 ==> 3.0 以上2）、3.0 以上 ==> 3.0 以下二、两种版本同时存在1）、找一个地方新建2）、进入cli2 文件夹下 打开cmd3）、修改cmd命令名称4）、配置环境变量 一、vue-cli脚手
vue-cli3.0脚手架搭建、解决跨域、打包、优化、项目压缩一条龙
qq_39584800的博客
12-05 2211
vue-cli3.0项目搭建到打包 之后开始创建项目 项目目录是这样的 这里还要手动加上四个文件 在.env.development文件中加入 VUE_APP_API ='我是测试接口' 在.env.production文件中加入 VUE_APP_API ='我是生产接口' 目的是为了打包的时候打出不同IP的包 在vue.config.js中加入配置项 这里用到的依赖有 ...
vue创建项目使用node-sass报错解决方法
my466879168的博客
05-06 1231
node-sass安装 1. 使用cnpm 使用cnpm安装node-sass默认会从淘宝镜像安装 cnpm install node-sass 2. 安装node-sass的时候使用淘宝镜像源 npm i node-sass -D --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ yarn add node-sass ...
用vue脚手架搭建vue项目时，报错或卡在安装node-sass处
ddx2019的博客
02-25 1534
很长一段时间没有自己搭建过vue的项目了，这两天突然发现在使用 vue create my-demo这个命令，创建vue项目（手动选择）的时候报错了，卡在了node-sass的安装。 yarn安装vue-cli,搭建vue项目时，报错，node-sass装不上 ...
cli下安装node-sass失败的解决方案
hui_style的博客
08-12 504
解决node-sass安装失败的问题
Vue CLI 3 创建项目需要注意的一些问题
Vincentyun
10-08 2096
Node.js 8.9 或更高版本； npm 6.4.0或更高版本； cnpm install 目前更改代码后浏览器不会自动刷新（以后应该会解决） npm install 浏览器可以自动刷新 默认会初始化git（vue create -n 创建项目可以跳过git初始化） ...
解决node-sass安装失败
qq_54203750的博客
07-25 389
解决node-sass安装失败总结
Vue-Cli 3.0 如何配置使用 Sass/postcss-px2rem/webpack-spritesmith
前端向朔
12-13 4086
背景 前段时间，我由 重构/UI开发 转岗前端开发，之前直接在重构自己的目录下输出静态CSS样式和HTML，现在变成直接在Vue-Cli 3.0 脚手架构建的项目下进行开发，这就需要在现有前端开发流程中整合重构流程。 我们之前重构是通过 gulp、postcss 等工具实现自动化处理及组件化开发，比如样式自动补全（配置浏览器兼容参数）autoprefixer、HTML 文件引入 gulp-file...
使用vue-cli3新建一个项目并写好基本配置(推荐)
10-17
首先，要使用 Vue CLI 3 新建项目，你需要确保已经全局安装了 Vue CLI。在命令行中运行以下命令来安装： ```bash npm install -g @vue/cli ``` 一旦安装完成，你可以通过以下命令创建一个新的项目： ```bash vue ...
vue-cli3.0项目搭建，项目结构和配置
Coderbook的博客
10-19 1104
这篇文章主要介绍下vue-cli3.0项目搭建，项目结构和配置等整理一下，分享给大家。 一、介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI：@vue/cli全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务：@vue/cli-service是一个开发环境依赖。构建于webpack和webpack-dev-server之上（提供 如：serve、build和...
Vue3安装最新版sass-loader node-sass报错解决方法
QC班长的博客
01-18 3945
最近在升级前端项目框架，之前的前端框架是Vue2.0构建的，最近打算全部都升级到最新版的，nodejs升级到了目前最新版v16.13.2，Vue ^3.0.0，VueCLI~4.5.0，然后在升级SASS预处理器时执行安装命令报错了 执行vue-loder官网的安装命令npm install -D sass-loader node-sass报错如下： 大概意思是依赖包冲突了，VueCLI4版本用的webpack版本依赖和sass-loader用的webpack依赖冲突，需要更新依赖或者降
vue项目经验：集成sass/scss
weixin_45031595的博客
08-17 1万+
vue-cli3提供了两种方式集成sass/scss 创建项目时选择预处理器sass 手动安装sass-loader 安装sass 方法一：创建vue项目时选择预处理器sass 使用vue-cli3创建vue项目 Vue CLI v4.5.15 ? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) > Manually select features
vue-cli3创建时选node-sass报错问题解决
wwming的日记本
12-05 1829
因为: vue-cli3.0默认使用yarn包管理工具而不是原来的npm yarn中node-sass，如果你不翻墙，默认下载极大可能会失败 解决方案 配置下 node-sass 的二进制包镜像地址 打开命令行 ， 输入 yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g 这样使用yarn...
关于运行vue项目安装node-sass失败的问题
华小灼
06-05 3343
  最近在导入别人的vue项目，在我本地运行，然后总是提示"node-sass not found"，今天几天的摸索和参考，现在分享哈我的解决办法。node-sass 安装失败的原因无非就那两种，一种是镜像源的问题，一种是本地缓存的问题，而我的解决办法主要是通过在本地缓存来解决的，而在本地需要一个"binding.node"的文件   首先查询当前环境适合安装的binding.node文件 node -p "[process.platform, process.arch, process.versions
vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量
热门推荐
weixin_41786576的博客
11-05 1万+
你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader： # Sass npm install -D sass-loader node-sass # Less npm install -D less-loader less # Stylus np...
node-sass为什么一直安装不上、安装失败？
qq_35430000的博客
08-28 8645
node-sass为什么一直安装不上、安装失败？
使用vue-cli脚手架搭建项目报错sass问题解决方案
A_9888的博客
05-15 833
有时候linux 系统和win10系统在安装依赖的时候会出现 node-sass 无法安装的问题可以尝试以下方案： 1. 单独安装：npm install --unsafe-perm node-sass 2. 直接使用：npm install --unsafe-perm
node-sass安装总报错
wenbintian的博客
01-03 2193
node-sass安装总报错 node-sass是我们开发中很常见的依赖包，也是安装时间冗长和最常见到报错的依赖。 安装node-sass失败原因有很多种，我们在说失败原因之前，先来分析一下node-sass的安装过程(以下node版本为v10.15.3)： PS D:\demo> npm i node-sass // 从npm源安装到node_modules > node-sass...
vue-cli 3.0使用指南
往后余生的博客
07-06 5810
安装环境 npm install -g @vue/cli 创建项目 1、vue create demo 2、选择手动选择功能    Manually select features 3、配置项目  我个人除了 test外的话，都安装了，注意的是，是否选中是空格键（space） 除了PWA的话，应该其他都比较熟悉，至于什么是PWA，简单的说，就是提升APP性能的一种途径，兼具w...
vue3安装sass-loader
最新发布
04-02
### 安装和配置 SASS Loader 的指南 在 Vue 3 项目中集成 `sass-loader` 是为了支持 `.scss` 文件的编译。以下是详细的说明： #### 1. 创建 Vue 3 项目 如果尚未创建 Vue 3 项目，可以通过以下命令完成： ```bash vue create my-vue3-project ``` 在交互式提示中选择带有 Vue 3 支持的功能组合（如 Babel、Router 和 Vuex）。这一步骤会初始化一个新的 Vue 3 项目[^2]。 #### 2. 卸载可能冲突的依赖项 如果有之前安装过的可能导致冲突的库（例如 `node-sass`），应先将其移除以避免潜在错误： ```bash npm uninstall node-sass ``` 此操作可防止因版本不兼容而引发的问题[^1]。 #### 3. 安装必要的依赖包 接下来需要安装两个核心依赖项来处理 SCSS 文件： - **dart-sass**: 提供最新的 Sass 编译器。 - **sass-loader**: 将 SCSS 转换为 CSS 并注入到 Webpack 中。 运行以下命令进行安装： ```bash npm install sass sass-loader --save-dev ``` #### 4. 配置 Vue CLI 或 Vite 环境 对于基于 Vue CLI 构建的项目，默认情况下无需额外修改配置文件即可正常工作。但如果希望自定义加载行为，则可以在项目的根目录下编辑 `vue.config.js` 文件并添加如下内容： ```javascript module.exports = { css: { loaderOptions: { sass: { additionalData: ` @import "@/styles/_variables.scss"; ` } } } }; ``` 上述代码片段用于全局引入共享样式变量或其他资源[^3]。 如果是使用 Vite 开发环境，请确保其插件已正确设置以解析 SCSS 文件；通常默认支持良好，仅需确认相关依赖已被成功安装即可。 --- ### 示例：编写一个简单的组件测试 SASS 功能 下面展示了一个基本示例，演示如何利用刚配置好的 SASS 加载功能开发组件。 ```html <template> <div class="example"> Hello from SASS! </div> </template> <script> export default {}; </script> <style lang="scss"> .example { color: $primary-color; } </style> ``` 同时，在 `/src/styles/` 下新建 `_variables.scss` 文件，并定义颜色变量： ```scss $primary-color: blue; ``` 这样就可以验证整个流程是否生效了！ ---
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值