stylus安装与配置

1. npm install stylus

2. npm i stylus-loader -D

3. webpack配置（vue2.0不需要配置）

   • 打开build中的webpack.base.conf.js

   • 在module中写

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

4. 使用stylus

   • 文件名直接为.styl后缀
     

   • 在vue组件中用

     <style lang="stylus" scoped>
     .el-header
         background-color $red
     </style>
     

5. vue中加载stylus文件

   • js中

     import '@/assets/stylus/varbles.styl'
     

   • style中

     @import './assets/stylus/varibles.styl'
     

6. 全局变量配置

   • 在每个vue文件中单独引入varibles.styl，但重复性大，并且不利于维护

   • 打开build/utils.js中更改

     //在generateLoaders方法的后面
     const stylusOptions = {
         import: [
             path.join(__dirname, "../src/assets/stylus/varibles.styl") // variables.styl全局变量文件
         ],
         paths: [
             path.join(__dirname, "../src/assets"),
             path.join(__dirname, "../")
         ]
     }
     //在后面的return中添加
     stylus: generateLoaders('stylus', stylusOptions),
     styl: generateLoaders('stylus', stylusOptions)
     //或把原来的(如下)，修改成上面的样子
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
     

7.重启服务