Nodejs:节点中SASS的基础知识介绍及node-sass库的安装卸载教程

迪鲁宾
610 阅读4分钟

Nodejs SASS npm库

SASS是一种转换为CSS的预处理器语言，它提供了大量的变量、继承性和混合器的功能。

SASS提供了两种不同的语法，在这篇文章中不涉及详细的语法。

Sass是带有缩进语法的SASSY CSS，这意味着没有大括号、分号，只有缩进。scss的语法类似于带有大括号和分号的CSS。

Npm有一个叫node-sass的模块，可以将SASS/SCSS转换成CSS文件。

node-sass是libsass的JavaScript版本，用于sass预处理程序。

重要的是，请在你的机器上安装NodeJS，node是运行任何JavaScript的命令。

为了确定node是否已经安装，请运行以下命令

B:\>node  --version
v10.16.3

创建空文件夹node-sass-work

mkdir nod/e-sass-work
cd node-sass-work

接下来，让我们用npm init命令在应用程序根目录下创建一个新的应用程序

B:\blog\node-sass-work>npm init -y

T 这将创建一个基本的package.json文件，如下图所示

{
  "name": "node-sass-work",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

用npm install命令在应用程序中安装node-sass

npm install node-sass --save

这将在依赖项中添加依赖项

{
  "name": "node-sass-work",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "node-sass": "^5.0.0"
  }
}

让我们看看一些使用node-sass库的例子

使用node-sass的命令行将sass编译成css

首先，为了在命令行中工作，你必须用-g选项进行全局安装

npm  install -g node-sass

这将在你的机器上进行全局安装

为了确保node-sass的工作，请运行以下命令

B:\blog\node-sass-work>node-sass --version
node-sass       5.0.0   (Wrapper)       [JavaScript]
libsass         3.5.5   (Sass Compiler) [C/C++]

最重要的是，如果你在全局和本地项目中安装，你可能会得到一个版本不匹配的问题。

语法:

node-sass options inputpath outputpath

选项:

  • -w 观察一个文件或文件夹的变化
  • -r 递归观察一个文件或文件夹的变化
  • -o 输出目录

inputpath是一个sass文件或文件夹的路径 outputpath是一个css文件或文件夹的路径

首先创建input.scss文件 在sass文件中定义简单的变量和混合元素

$bold-weight: 700;
$border-radius: 4px;
@mixin padding-left {
	padding-left: 10px;
}

div {
	font-weight: $bold-weight;
}
input {
	border-radius: $border-radius;
	@include padding-left;
}

这里是运行的命令

B:\blog\node-sass-work>node-sass input.scss output.css
Rendering Complete, saving .css file...
Wrote CSS to B:\blog\node-sass-work\output.css

之后，输出的css文件是

div {
  font-weight: 700; }

input {
  border-radius: 4px;
  padding-left: 10px; 
  }

使用-o选项，将sass文件夹转换为css文件夹。

node-sass inputscssfolder/ -o outputcssfolder/

我们必须使用-w选项来观察变化。

node-sass -w inputscssfolder/ -o outputcssfolder/

使用npm脚本与node-sass将sass转换为css文件/目录

让我们使用上述相同的例子。

在package.json文件中，请添加以下几行

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
     "compile": "node-sass input.css output.css"

  },

你可以使用npm run compile命令运行。

从node项目中卸载node-sass

有时，这些包与nodejs的安装版本不匹配。

使用npm uninstall命令不容易删除，但需要做几个步骤，如下所示

为此，我们需要用以下命令卸载它

npm uninstall node-sass

接下来，package-lock.json已经在windows下，从applicaiton中删除package-lock.json文件 在Linux/Unix中，进入application目录

rm -rf package-lock.json

错误

node-sass与本地操作系统的sass编译有依赖关系，因此你可能会在安装node-sass库时看到很多问题。

没有找到node-sass命令

如果node-sass没有在全局正确安装，那么可能会看到一个错误 -node-sass命令没有找到

请使用-g选项全局安装node-sass。

npm install node-sass -g

有些时候，你的机器出现了绑定错误，如看到Node Sass无法为你的当前环境找到一个绑定。

这个错误是在node没有为当前运行的机器找到绑定时产生的。

请删除node_modules文件夹和package-lock.json文件并发出以下命令。

npm rebuild node-sass or 
npm rebuild node-sass --force

这将下载正确的绑定并为你的机器建立node-sass。

总结

总结这篇文章，我们学习了节点中SASS的基础知识，安装和卸载nodejs库，以及使用node-sass时经常遇到的问题。

我希望你喜欢:-)

avatar
文章
阅读
粉丝