stylus在Vue中的使用

loader安装一下，安装：

npm i stylus stylus-loader style-loader -D

stylus 就是安装包了
stylus-loader 就是一个 loader，loader 不懂就理解为人的身体吧，需要运行就装哪个。
style-loader 也是一个 loader，用来把 css-loader 的解析好的样式创建一个 style 的标签，然后安装到 head 中，就如机器人组装。这样浏览器就能识别了。
关于 loader 中在 webpack 中已经记录过了。

stylus 的特性：

• 冒号、分号、逗号、括号可有可无
• 变量
• 插值（Interpolation）
• 混合（Mixin）
• 数学计算
• 强制类型转换
• 动态引入
• 条件表达式
• 迭代
• 嵌套选择器
• 父级引用
• Variable function calls
• 词法作用域
• 压缩可选
• Stylus 可执行程序
• 健壮的错误报告
• 单行和多行注释
  等等超级多，自行直行把>>https://stylus.bootcss.com/

在 webpack 中 webpack.base.conf 配置：

  {
        test:/\.styl$/,
        use:[
          {
            loader:"style-loader"
          },
          {
            loader:"css-loader"
          },
          {
            loader:"stylus-loader"
          }
        ]
      }

回顾一下，loader 的执行顺序，从右至左，还有从下往上执行
先解析 stylus-loader 样式，然后在通过 css-loader 解析成浏览器认识的样子，在通过 style-loader 添加到 head 中

        配置 stylus 全局样式，比如看设计稿的时候，会有一些公用的东西，可以提前参考设计稿配好全局，后面直接使用就好了，如果没有就后面写在抽离，毕竟我本身就是一枚UI，所以会有规范说明。

        开始在 webpack 中 utils.js 配置：

const stylusOption={
    import:[
      path.join(__dirname,"../src/styl/main.styl")
    ],
    paths:[
      path.join(__dirname,"../src/styl/"),
      path.join(__dirname,"../")
    ]
  }

import 要导入全局的文件
paths 全局的路径

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus',stylusOption),
    styl: generateLoaders('stylus',stylusOption)
  }

        最后在最后两行添加上面配好的配置，最后查看一下，就完成啦。

<style lang="stylus">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: txtcolor;
  margin-top: 60px;
}
</style>