zoukankan      html  css  js  c++  java
  • vue-cli构建的vue项目中引入stylus文件

    stylus是css预处理器。还有另外两种css预处理器语言详解:less、sass。
    不懂的可以先看一下这篇文章:stylus预处理入门
    在vue项目引入stylus css预处理器,可以让我们的css也可以更加灵活。可以看一下图中的stylus 文件,以styl结尾。

     
    image.png

    在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus、stylus-loader依赖以及别名配置。其实使用styl文件很简单,但是刚开始搞,还是会搞死人的。具体的步骤如下:

    1 安装stylus、stylus-loader依赖

    推荐cnpm,因为快。进入项目文件下,使用命令

    cnpm install stylus stylus-loader
    

    2 package.json文件配置

    上述命令并不会帮我们安装到配置文件,需要我们自己配置下,如下,添加上这两项配置

    "devDependencies": {
        ...
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.2",
        ...
      },
    

    3 别名配置

    配置别名为了在引用的时候,程序能够加载正确的路径。
    打开文件根目录下 build >webpack.base.conf.js

    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'src': resolve('src'),
          '@': resolve('src'),
          'common':resolve('src/common')
        }
      },
    
    • common :别名
    • 'src/common' :styl路径

    这样我们就可以使用common引入styl文件了。

    引入

    我们将组合的样式汇集在index.styl中
    目录结构:


     
    image.png
     
    index.styl

    在main.js中引入index.styl

    import Vue from 'vue'
    import App from './App'
    // import router from './router'
    import 'common/stylus/index.styl'
    

    在组件中引入

    <style scoped lang="stylus">
      @import "~common/stylus/variable.styl"
      #app
        color: $color-theme
    </style>
    

    小礼物走一走,来简书关注我



    作者:布丁猫
    链接:https://www.jianshu.com/p/62b4b93d4c97
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
  • 相关阅读:
    可变长参数列表
    《Android深入透析》之广播(Broadcast)
    android设计模式资源集合
    Android内存性能优化
    Java 对象的生命周期
    Android 打印java堆栈的几种方法
    Android下打印调试堆栈方法
    UML类图几种关系的总结
    【转】Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
    查看Android设备的CPU架构信息
  • 原文地址:https://www.cnblogs.com/youqc/p/10910085.html
Copyright © 2011-2022 走看看