Sass 本地安装及编译文件

1、下载并安装 Node.js ，打开终端输入 node -v 查看是否安装成功，安装成功则会在终端输出版本号。

2、在终端中使用 cd 命令进入文件夹，输入 npm init 初始化项目，此操作将会在文件夹根目录创建 package.json 文件。

3、输入 npm install node-sass --save-dev 安装 Sass，安装后会在文件夹中新建 node_modules 文件夹。

4、新建 sass 文件夹，并在文件夹中建立样式表，如 main.scss。

5、修改 package.json 文件中 scripts 的内容，编写 npm 脚本并运行。

"scripts": {
    "watch:sass": "node-sass sass/main.scss css/style.css -w",
    "server": "live-server",
    "start": "npm-run-all --parallel server watch:sass"
  },

watch:sass 命令表示监听文件变化，server 命令是运行本地服务，未指定浏览器则以默认浏览器打开，指定浏览器打开需修改为 live-server --browser=chrome ， start 命令表示运行以上命令，npm-run-all 指运行所有脚本命令，--parallel 指同时运行以上服务，在运行 start 命令前还需在终端输入 npm install npm-run-all --save-dev 安装 npm-run-all ，安装完成后在终端输入 npm run start 即可运行。

6、编译 scss 文件，将 scss 文件转换成 css 文件。

"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",

compile:sass 表示编译 scss 文件，prefix:css 表示为样式表里不支持的样式属性自动添加前缀，运行 prefix:css 前需执行 npm install autoprefixer --save-dev 和 npm install postcss-cli --save-dev 命令。

<!-- "prefix:sass": "postcss --use autoprefixer -b '支持浏览器最后 10 个版本' 输入文件 -o 输出文件"  -->

"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css"

<!-- 压缩样式文件 -->
<!-- "compress:css": "node-sass 输入文件路径及名称 输出文件路径及名称 --output-style compressed" -->
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed"

如包含图标或字体样式文件可使用 concat:css 命令合并文件，合并文件前需执行 npm install concat --save-dev 命令安装 contact 。

<!-- "concat:css": "concat -o 输出文件路径及名称 合并文件路径及名称 -->
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.compile.css

<!-- 运行以上所有命令，在终端输入 npm run build:css -->
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"

注： package.json 文件可重复使用，每次使用将文件复制到新的文件夹，执行 npm install 命令即可。