stylus

stylus

stylus的后缀是 .styl
stylus介绍
对于开发来说，CSS的弱点在于静态化。
stylus是一个CSS的预处理框架。
Stylus默认使用 .styl 的作为文件扩展名。

Stylus安装

 npm install stylus -g

生成CSS
命令行中
建立一个stylusExample/，再在里面建立 src 目录专门存放 stylus 文件，在里面建立 example.styl 文件。然后在 stylusExample 目录下面执行下面命令

$ stylus --compress src/

输出compiled src/example.css ，这个时候表示你生成成功了，带上–compress参数表示你生成压缩的CSS文件。

$ stylus --css css/example.css css/out.styl CSS转换成styl 
$ stylus help box-shadow CSS属性的帮助 
$ stylus --css test.css 输出基本名一致的.styl文件

vue 引入 stylus
建立好项目后我们来安装stylus

npm install stylus stylus-loader --save-dev

安装成功。
在style标签添加：

<style scoped lang="stylus">

tips: npm run build 时记得修改 config 文件夹下的 index.js 中的 build 对象。

Vue中引入公共样式的styl文件
1.引用styl格式的CSS，

<style scoped lang="stylus" rel="stylesheet/stylus">

2.安装插件
安装stylus stylus-loader style-loader

npm install stylus stylus-loader style-loader --save-dev

3.修改配置（webpack在webpack.base.conf.js的module的loaders加入）

{
      test: /\.styl$/, 
loader: 'style-loader!css-loader!stylus-loader'，
include: []  //必须加include：[]
}

在resolve的extensions里加入了.styl
extensions: [’’, ‘.js’, ‘.vue’,’.styl’]