Stylus

Stylus是一个CSS预处理器。
那么在SaaS，Less和Stylus中，为什么选择后者呢？

因为Stylus是来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使Stylus。
1.配置Stylus环境

npm install stylus --save-dev
npm install stylus-loader --save-dev
npm run dev

2.

     --save-dev  是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

     devDependencies 节点下的模块是我们在开发时需要用的，比如本次安装的css预处理器stylus。这些模块在我们的项目部署后是不需要的。

3.stylus的使用：

 (1). 在.vue文件里面直接使用，只要在style标签加上lang="stylus"即可:

<style lang="stylus">
   
</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文件的

 

转载于:https://www.cnblogs.com/yunhemeihe/p/10823690.html