Css->预处理器在html开发模式中的使用(stylus篇)

写在前面

在SPA但也应用开发中，咱们能够实现组件化和模块化的开发模式，css也可使用预处理器，能够很方便咱们开发者提升效率，可是后来我发现脱离了vue脚手架的开发模式，不少同窗都不会使用css预处理器了，那么今天就带你们一步一步来构建完成css预处理器使用。
这样来操做

第一步

全局安装stylus环境

npm i -g stylus
复制代码

第二步

搭建目录结构
1.建立项目example
2.项目中建立style目录
3.style目录下建立css和stylus两个文件

第三步

在stylus目录下建立一个文件(common.styl为例),并编写如下代码

html,
body
    min-height 100%
    background-color red

复制代码

第四步

启动命令行工具，进入到stylus目录，执行命令编译.styl文件到指定目录(实时)

stylus -w common.styl -o ../css/common.css
复制代码

这样咱们就能够只关注对.styl或者其余预处理器的代码，不用每一次都去手动编译

说明

-w 表明实时监听对应的文件，省得每次都要手动编译
-o 表明指定编译到某一个路径

写在最后

但愿个人分享对你有所帮助，更多资讯请持续关注，我会分享愈来愈多的实战经验哦！ 或加入大前端知识体系社区一块儿探索技术:608229520