一、创建vue项目
vue init webpack app-name
二、安装sass
cnpm install -D node-sass sass-loader
三、node-sass版本和sass-loader版本对应
| node | node-sass | sass-loader |
|---|---|---|
| 16 | 6.0.1 | 10.2.0 |
| 14 | 4.12.0 | 6.0.6 |
npm i node-sass@6.0.1 sass-loader@10.2.0 --save-dev
# 如果报错，可能是安装过程中某些包丢失，尝试以下方法解决
npm rebuild node-sass
遇到的问题
- Module build failed: TypeError: this.getOptions is not a function
这是由于安装的版本过高导致的，安装低版本的即可
目前我本地的node版本是16.10.0，那么node-sass可以安装6.0.0版本的。如果是14.10.0版本的，可以安装4.14.1版本
cnpm install -D node-sass@6.0.0 sass-loader@10.1.0
- 下载镜像失败
Downloading binary from https://cdn.npmmirror.com/binaries/node-sass/v4.14.1/win32-x64-93_binding.node
Cannot download "https://cdn.npmmirror.com/binaries/node-sass/v4.14.1/win32-x64-93_binding.node":
HTTP error 404 Not Found
Hint: If github.com is not accessible in your location
try setting a proxy via HTTP_PROXY, e.g.
export HTTP_PROXY=http://example.com:1234
or configure npm proxy via
npm config set proxy http://example.com:8080
解决办法：
将镜像先下载下来，下载对应版本的对应文件，下载地址如下
https://github.com/sass/node-sass/tags
然后进行安装
# 配置路径
set SASS_BINARY_PATH=d:\win32-x64-72_binding.node
# 安装
npm i node-sass -D –verbose
- 这是我遇到的最头疼的一个问题，网上查的所有的办法都试过了还，还是各种报错，错误太多了，如下所示：
1. Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
2. Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.
3. # SEO
Syntax Error: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
试了无数遍，最后是安装了sass-loader@6.0.6、node-sass@6.0.1才解决的，安装之前一定要把之前安装的卸载干净才可以
npm uninstall --save sass-loader
npm uninstall --save node-sass
cnpm install --D sass-loader@6.0.6
cnpm install --save node-sass@6.0.1
每次解决这个问题都需要2两天时间，每次都能各种装不成功。我再也不想遇见这个问题了
