Stylus是一个CSS预处理器。

Stylus安装包安装:

dell@DESKTOP-KD0EJ4H MINGW64 /f/gsff-frone
$ cnpm install stylus --save-dev
√ Installed 1 packages
√ Linked 14 latest versions
√ Run 0 scripts
√ All packages installed (7 packages installed from npm registry, used 1s(network 997ms), speed 60.55kB/s, json 15(39.1kB), tarball 21.26kB) dell@DESKTOP-KD0EJ4H MINGW64 /f/gsff-frone
$ cnpm install stylus-loader --save-dev
√ Installed 1 packages
√ Linked 4 latest versions
√ Run 0 scripts
√ All packages installed (3 packages installed from npm registry, used 511ms(network 506ms), speed 42.89kB/s, json 5(21.7kB), tarball 0B)

安装说明:为什么使用 --save-dev

1. --save-dev  是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖。

2. devDependencies 节点下的模块是我们在开发时需要用的,比如本次安装的css预处理器stylus。这些模块在我们的项目部署后是不需要的。

stylus的使用:

1. 在.vue文件里面直接使用,只要在style标签加上lang="stylus"即可:

<style lang="stylus">
$mainCol = #000;
h1 {
color: $mainCol;
}
</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文件的

3. 具体的语法可参考   张鑫旭的stylus中文版参考文档之综述

4. calc属性使用stylus变量的用法:

$width = 100px;
width: "calc( 100% - %s)" % $width;

5.

如何在vue中全局引入stylus文件的公共变量

在vue项目中stylus的安装及使用的更多相关文章

  1. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  2. vue 项目中安装npm--save-dev 和 --save 命令

    在vue项目中我们常用npm install 安装模块或插件 有两种命令把他们写入到 package.json 文件里面去 例如安装axios 安装到开发环境npm axios --save-dev ...

  3. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

  4. vue项目中使用iconMoon图标

    前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...

  5. vue入坑教程(二)在vue项目中如何导入element以及sass

    在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...

  6. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  7. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  8. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  9. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

随机推荐

  1. Lecture2

    共生矩阵:

  2. NCBI News

    NCBI淘汰序列GI - 使用Accession.Version代替! 截至2016年9月,被称为“GI”的整数序列标识符将不再包括在NCBI支持的序列记录的GenBank,GenPept和FASTA ...

  3. bootstrap-glyph-customization

    http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm http://fontawesome.io/icons/

  4. C++STL 算法

    算法部分主要由头文件<algorithm>,<numeric>和<functional>组成. <algorithm>是所有STL头文件中最大的一个,其 ...

  5. Redis-环境搭建

    Redis官方不提供Windows版,不过微软开源组织提供了Windows版本的Redis,此处将安装Windows版的Reids,供学习使用. 1.下载Windows版Redis安装包: 安装包地址 ...

  6. 用cglib包来为类产生动态代理类对象

    一:在JDK里也有动态代理的类和接口,是Proxy和InvocationHandler,但是Proxy只能为接口产生代理类,借助InvocationHandler的实现类来完成对类对象的代理: 但是在 ...

  7. Nodejs 传图片的两种方式

    node上传图片第一种方式 1,首先引入模块 "connect-multiparty": "~1.2.5", 在package.json中添加 "co ...

  8. python 基础_ 打印输出 循环分支2

    一.在python3中的打印输出 1.输出字符串是print("hello world!!!") #输出字符串的时候可以是单引号括起来,也可以是双引号括起来.区别在于 2.输出变量 ...

  9. Arria10中PHY的时钟线结构

    发送器时钟网络由发送器PLL到发送器通道,它为发送器提供两种时钟 高速串行时钟——串化器的高速时钟 低速并行时钟——串化器和PCS的低速时钟 在绑定通道模式,串行和并行时钟都是由发送器的PLL提供给发 ...

  10. noip第10课资料