ionic使用sass

Posted 2020-08-04 YZ-M

sass 是一个css的预编译器，常见的预编译器有less,sass,stylus等，目前sass似乎更受青睐一些，bootstrap的最新版本以及ionic 都是用sass来构建页面效果的。这篇文章讲解如何在ionic工程使用sass。

1.首先需要在ionic项目中执行下面的命令：
ionic start CustomSass blank && cd CustomSass
ionic setup sass
注意：在执行这个命令的时候有可能会出错，然后就会提醒‘npm install -g gulp’,这时候按照提示执行这个命令，然后执行ionic setup sass就不会出错了。
2.执行完ionic setup sass之后，查看一下index.html，这时候它自动删除了ionic.css，以及style.css替换成ionic.app.css了

3.在ionic.project文件中添加：

"gulpStartupTasks": [
  "sass",
  "watch"
],
"watchPatterns": [
  "www/**/*",
  "!www/lib/**/*"
]

4.执行ionic serve,在ionic.app.scss中写你的sass；

5.也可以在ionic > scss文件夹下建立一个新的scss文件：_uouoho.scss，然后在ionic.scss文件下@import该文件：‘uouoho‘,接着在_uouoho.scss中写入sass就可以了。