nodesass对应node版本详解

一、nodesass版本对应不上

在使用nodesass的过程中，我们可能会发现有些版本的node对应不上nodesass，这时候我们需要查看官方文档来确定适用的版本。

例如：

在node v12.20.1的情况下，官方文档建议使用npm install node-sass@4.14.1来安装合适的nodesass版本。

二、node14版本对应的nodesass版本

随着node的更新，nodesass也在不断地进行更新和适配。在node v14的情况下，推荐使用nodesass v5.0.0及以上的版本。

示例代码:

npm install node-sass@5.0.0

三、node切换版本

在使用nodesass时，我们可能需要切换不同的node版本来进行适配。这时候我们可以使用工具来管理不同版本的node，例如nvm。

示例代码:

nvm install 14.15.3 // 安装指定版本的node
nvm use 14.15.3 // 切换至指定版本的node

四、nodesass自动重建

在开发过程中，我们可能需要修改sass文件来修改样式。这时候我们可以使用watch模式来自动重建nodesass。

示例代码:

// 安装依赖
npm install -D node-sass
npm install -D nodemon

// package.json配置
"scripts": {
  "watch:sass": "./node_modules/nodemon/bin/nodemon.js -e scss -x \"npm run build:sass\"",
  "build:sass": "node-sass --output-style compressed src/assets/sass/app.scss dist/styles/app.css"
}

// 启动watch模式
npm run watch:sass

五、nodesass加速

在使用nodesass时，由于编译过程较慢，可能会影响我们的开发效率。这时候我们可以使用一些工具来进行加速，例如node-sass-china等。

示例代码:

npm install -D node-sass-china

// 启动加速模式
node-sass-china app.scss

六、nodesass基本用法

除了以上的针对版本问题和工具使用方法外，nodesass还有一些基本用法，例如变量、嵌套、继承、混入等等。

示例代码:

// 变量
$primary-color: #ff0000;
.header {
  background-color: $primary-color;
}

// 嵌套
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;

    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
  }
}

// 继承
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend %message-shared;
  border-color: green;
}

// 混入
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}