最近在研究webpack来构建项目,说说安装node-sass模块是遇到的问题

首先我是个小白哈,第一次玩这东西,首先我为什么要去安装node-sass模块呢,因为不安装这个模块的话sass-loader就不能正常工作

就这样搞了一个近一天的时间才安装好node-sass模块,各种google,其实好多大神说的确实是可行的,但是作为小白并不是那么理解,所以今天来整理分享给大家,毕竟用sass来编写css那就叫一个字爽啊,可以节省很多代码量,下面来看看问题

首先小白遇到问题一般都是什么都不管,先看看咱们熟悉的报红,

生成启动时间为 2016/6/27 星期一 11:39:46。
节点 1 上的项目“C:\Users\世民\node_modules\node-sass\build\binding.sln”(默认目标)。
ValidateSolutionConfiguration:
  正在生成解决方案配置“Release|x64”。
MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题,1) 安装 .NET Framework 2.0 SDK;2) 安装 Microsoft Visual Studio 2005;或 3) 如果将该组件安装到了其他位置,请将其位置添加到系统路径
中。 [C:\Users\世民\node_modules\node-sass\build\bindi
ng.sln]
已完成生成项目“C:\Users\世民\node_modules\node-sass\build\binding.sln”(默认目标)的操作 - 失败。

生成失败。

“C:\Users\世民\node_modules\node-sass\build\binding.sln”(默认目标) (1) ->
(_src_\libsass 目标) ->
  MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题,1) 安装 .NET Framework 2.0 SDK;2) 安装 Microsoft Visual Studio 2005;或 3) 如果将该组件安装到了其他位置,请将其位置添加到系统路
径中。 [C:\Users\世民\node_modules\node-sass\build\bin
ding.sln]

    0 个警告
    1 个错误

然后呢,就一头赛到vc++组件里去,安装各种无用的东西,尝试过各种解决方案,最后实在是没有办法了,就仔细的从头到尾的看错误信息,然后在 node scripts/install.js 之后发现这么一句话

Cannot download "https://github.com/sass/node-sass/releases/download/v3.8.0/win32-x64-46_binding.node":

这句话大家都懂的哈,我就不说了,这里我也不知道为什么会下载失败,因为我的电脑全局代理的,正常的访问任何网站都是无阻碍的,百思不得解,

好吧那我就自己下载吧(为什么自己下载?因为我在google的时候也是发现了写有用的东西,虽然没那么直观哈,但是也给了我很多帮助)

下载完了之后把它注册成全局环境变量,两种方式:

第一种:直接右键我的电脑--》属性--》高级系统设置--》环境变量--》添加

第二种:set XXX=文件路经--》set SASS_BINARY_PATH=F:\lishiming\tools\node-sass\win32-x64-46_binding.node

查看环境是否合适:echo %SASS_BINARY_PATH%

如果打印出来您配置好的文件地址那就ok了,

最后再来试试安装:npm i -g node-sass

完美解决

时间: 2024-10-11 20:48:20

最近在研究webpack来构建项目,说说安装node-sass模块是遇到的问题的相关文章

Vue-Router路由Vue-CLI脚手架和模块化开发 之 Vue-CLI 2.x脚手架工具基于webpack simple模板与基于webpack模板构建项目

Vue-CLI 2.x脚手架工具基于webpack simple模板构建项目 vue-cli是一个基于vue.js进行快速开发的完整系统.基于webpack构建,并进行默认配置,可通过插件扩展,可升级: vue-cli帮我们创建基本项目结构,跳过繁琐的项目配置环节,将精力集中在业务上: vue-cli的版本: @vue/cli 3.x版本:点击前往官网 vue-cli 2.x版本:点击前往官网 安装vue-cli $ npm install -g vue-cli 安装成功,查看其版本: 使用we

[转]webpack进阶构建项目(一)

阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解babel-loader加载器 6.理解 extract-text-webpack-plugin(独立打包样式文件) 7.webpack打包多个资源文件 8.webpack对图片的打包 9.学习web-dev-server 创建服务器及动态监听css及js文件的改变: 10.assets-webpack-plugin插件解决html文件

webpack进阶构建项目(一)

阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解babel-loader加载器 6.理解 extract-text-webpack-plugin(独立打包样式文件) 7.webpack打包多个资源文件 8.webpack对图片的打包 9.学习web-dev-server 创建服务器及动态监听css及js文件的改变: 10.assets-webpack-plugin插件解决html文件

ES6+React+Webpack初步构建项目流程

当我们打算使用Webpack构建工具,React和ES6来开发项目的时候,构建这么一套自动化的项目的流程见下: 第一步:webpack是一个基于node的项目,我们使用命令行对webpack进行全局的安装 npm install webpack –g.可以通过webpack  –h来查看安装的版本信息.然后我们新建一个文件夹用来存放整个项目文件.为了可以在项目中使用webpack,我们需要将webpack安装到当前的项目依赖中,在新建的文件夹下输入:npm init(安装webpack依赖,会在

D1.1.利用npm(webpack)构建基本reactJS项目

前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# webpack 介绍:http://webpack.github.io/docs/what-is-webpack.html npm install -g webpack webpack-dev-server #在项目文件夹路径下,初始化npm项目 npm init #安装webpack和webpa

Vue2+VueRouter2+webpack 构建项目实战(二):目录以及文件结构

通过上一篇博文<Vue2+VueRouter2+webpack 构建项目实战(一):准备工作>,我们已经新建好了一个基于vue+webpack的项目.本篇文章详细介绍下项目的结构. 项目目录以及文件结构 如图所示: 如上图所示,自动构建的vue项目的结构就是这样. 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管. config 配置目录,默认配置没有问题,所以我们也不用管 node_modules 项目开发依赖的一些模块 src 开发目录(

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 1.安装html-webpack-plugin插件,输入命令:npm install html-webpack-plugin --save-dev 2.在webpack.config.js文件中,引入html-webpack-plugin插件 3.输入命令:npm run webpack,编译打包 可以看到在dist/js目录下新生成了一个index.html文件,并且引入了新编译生成的两个js,但此

[F2016061802] NodeJS之旅-使用webpack构建项目时代码正确但编译出错

遇到这个问题前,我对webpack还不算太熟,仅仅限于用它来编译ES6代码,代码写多了,问题也就来了. 一开始用NodeJS写些小项目,用的模块并不多,遇到些报错问题,改改也就通过了.然而,随着用的第三方模块增多,用webpack构建项目时出现错误的次数越来越多,最奇怪的是:代码检查了十几遍,明明任何错误都没有,编译却通不过.最后只能硬着头皮去看编译后的代码才明白问题出在哪里! 对于webpack,它是自动把依赖都输出到目标文件中.比如: import koa from 'koa' 构建后的输出

Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开的api来做项目.不过本章节不涉及调用接口等内容.这里,我们假设我们的项目是做俩页面,一个列表页面,一个内容页面.列表页面有分页等,内容页面展示. 因此,我们需要两个模板文件. 我们在src/page目录下面新建两个文件,分别是index.vue和content.vue index.vue代码: <