摘要：
Stylus是一个CSS预处理器。这些模块在我们的项目部署后不需要。
Stylus是一个CSS预处理器。
Stylus安装包安装：
dell@DESKTOP-KD0EJ4H MINGW64 /f/gsff-frone $ cnpm install stylus --save-dev √ Installed 1 packages √ Linked 14 latest versions √ Run 0 scripts √ All packages installed (7 packages installed from npm registry, used 1s(network 997ms), speed 60.55kB/s, json 15(39.1kB), tarball 21.26kB) dell@DESKTOP-KD0EJ4H MINGW64 /f/gsff-frone $ cnpm install stylus-loader --save-dev √ Installed 1 packages √ Linked 4 latest versions √ Run 0 scripts √ All packages installed (3 packages installed from npm registry, used 511ms(network 506ms), speed 42.89kB/s, json 5(21.7kB), tarball 0B)
安装说明：为什么使用 --save-dev
1. --save-dev 是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
2. devDependencies 节点下的模块是我们在开发时需要用的，比如本次安装的css预处理器stylus。这些模块在我们的项目部署后是不需要的。
stylus的使用：
1. 在.vue文件里面直接使用，只要在style标签加上lang="stylus"即可:
<style lang="stylus"> $mainCol = #000; h1 { color: $mainCol; } </style>
2. 引用.styl文件的方式也有两种：
<script> //引入方法一： import "@/assets/css/public/common.styl"; </script> <style lang="stylus"> //引入方法二： @import "../assets/css/public/common.styl"; //这里使用相对路径 }
两者的区别：
（1）在script标签内引入的styl文件，里面的图片路径是相对于当前的.styl文件的
（2）在style 标签引入的.styl文件是相对当前的.vue文件的
3. 具体的语法可参考 张鑫旭的stylus中文版参考文档之综述
4. calc属性使用stylus变量的用法：
$width = 100px;
"calc( 100% - %s)" % $width;5.
如何在vue中全局引入stylus文件的公共变量