zoukankan      html  css  js  c++  java
  • 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文件的

  • 相关阅读:
    聊聊Spark的分区、并行度 —— 前奏篇
    深入探讨HBASE
    分布式流平台Kafka
    GeoServer中使用SLD样式
    OpenLayer修改WFS中的要素
    leaflet加载GeoServer的WFS服务
    OL实现属性查询的功能
    OL3实现空间查询的代码示例
    WFS—GetFeature方法
    OpenLayer+Geoserver+postgis实现路径分析
  • 原文地址:https://www.cnblogs.com/yunhemeihe/p/10823690.html
Copyright © 2011-2022 走看看