项目引入sass
一、环境&项目设置
- 安装npm；
- 初始化项目：npm init；
- 全局安装node-sass，用于编译scss文件
npm install -g node-sass
- 创建scss以及输出的css目录，测试目录结构如下
二、打包命令
在package.json的script里设置全体打包命令以及监控scss文件命令
"scripts": {
"build-css":"node-sass src/scss/ -o src/css/ ",
"watch-css":"node-sass -w -r src/scss -o src/css"
},
- 打包所有sass文件命令：node-sass src/scss/ -o src/css/
- 监控所有sass文件命令：node-sass -w -r ./src/scss -o ./src/css
- 打包单个或者监控单个文件时，上面的命令具体到单个文件就可以了，如果不指定生成的文件名，默认和scss文件同名
三、sass编写模块化
sass打包时，以下划线开头的文件不会生成目标css文件，可以将sass文件按照模块编写，文件名以下划线开头，如果需要用到该模块在scss文件里用import方式引用即可，例如： 存在_module1.scss文件，在demo.scss文件里引用：
import "_module1"
最后编译生成的文件为demo.css
四、其他
- 关于node-sass命令不明白的，可以使用node-sass --help查看帮忙说明；
- 待续
