前言

之前在项目中经常使用sass，偶然一次看到前辈在用stylus，然后我问他为啥要用这个呀，然后他给我说了几点优点：

stylus可以自动将px转成rem，这就节省自己算rem的事件
stylus可以像sass一样使用变量、计算模式
stylus可以像sass一样嵌套样式

然后，我就被种草了。

恰巧这次项目要做自适应，所以这次来试试，并且记录一下安装和使用过程。

一、安装stylus

版本必须指定3.0.1的，否则会报错~

npm install stylus stylus-loader@3.0.1 --save-dev

二、使用步骤

1.使用stylus

使用在style标签上指定：

<style lang="stylus" ></style>

2.引用全局样式及配置

首先你要创建一个公共样式并以 .styl 结尾，下面是我的目录结构

然后再App.vue中引：

<style lang="stylus" scoped>
@import './assets/style/public.styl';
</style>

然后你在运行，发现有些咋个样式不生效呀~

不要慌，请你先找到build/utils.js文件，然后找到generateLoaders函数，在他的后面手动引入公共样式：

  // 配置stylusconst stylusOptions = {import: [path.join(__dirname, "../src/assets/style/public.styl")]}

然后再在return里面配置stylus使用这个公共样式：

 stylus: generateLoaders('stylus', stylusOptions),styl: generateLoaders('stylus', stylusOptions)

整体截图：

当当当~

就这么简单，开始使用吧~

总结

以上就是今天要讲的内容，本文介绍了stylus的安装和使用，包括其中的注意事项。

下一章：vue中使用lib-flexible和postcss-pxtorem实现自适应

stylus在vue中的安装及使用相关推荐

stylus在vue中的使用
stylus是一个css预处理器,比较流行的css预处理器有sass.less.stylus,它们都一样,都是css的语法糖,可以使用变量,可以有简单的逻辑,使css的开发效率更高,更易维护.styl ...
scss在Vue中的安装及使用
一.安装 npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-load ...
ElementUI，和IView在Vue中的安装引入和配置
ElementUI 终端打开的项目目录下 npm i element-ui -S 在src/main.js文件中添加 import ElementUI from 'element-ui' import ...
BootStrap在Vue中的安装使用详细教程
文章目录 1.安装jquery(Bootstrap依赖jquery) 2.引入BootStrap 3.下载BootStrap包,并将文件放入src/assets目录下 4.配置使用jQuery 4.1 ...
vue中devTools插件安装教程
vue-devTools 为了更方便的在开发过程中对 Vue 程序进行调试,除了传统的浏览器自带的 debug 工具以外,我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试 vue-devTo ...
「后端小伙伴来学前端了」Vue中为什么直接安装less-loader会报版本过高错误？你有没有思考过？
清晨的☀ 前言我们都知道在 Vue 中并不只有纯正的CSS,还有less.sass等,后面这些,写起来都可以级联着,不需要像原生的css那样,会方便很多. 大家都知道我也是最近写的vue,看见周围人 ...
在vue中安装使用vux
最近因为的工作的原因在弄vue,从后端弄到前端之前一直用js,现在第一次接触vue感觉还挺有意思的,就是自己太菜了,这个脑子呀....不太够用.....页面设计用了一个叫vux的东西,vux可以提供一 ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
Bootstrap前端框架学习（一）：Bootstrap在Vue项目中的安装及可视化布局
Bootstrap前端框架学习(一):Bootstrap在Vue项目中的安装及可视化布局 node.js的安装 bootstrap的安装 bootstrap快速布局 node.js的安装我们需要安装 ...

stylus在vue中的安装及使用

前言

一、安装stylus

二、使用步骤

1.使用stylus

2.引用全局样式及配置

总结

stylus在vue中的安装及使用相关推荐

最新文章

热门文章