webpack 编译stylus_vue项目中stylus基本使用

定义 ：css预处理器

除了stylus之外还有less和SaaS，他们都是css预处理器，本身并不能被浏览器识别，所以他们最后还是被处理为为css，供浏览器识别。如果想详细了解三者区别的请stylus区别

为什么这里选择stylus呢？？？

Stylus是来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使用Stylus。

①sublime安装stylus支持

②webpack配置

③stylus基本语法

讲解：

sublime安装stylus支持

步骤：

快捷键CTRL+shift+P→在弹出框输入install Package → 回车 → 输入Vue Syntax Highlight→ 回车 →安装完成

重新打开stylus文件即可发现代码已经高亮。

webpack配置

① 下载stylus包依赖

npm install stylus stylus-loader -D

② webpack.base.conf.js添加规则：

{

test: /\.styl$/,

use: [

'vue-style-loader',

'css-loader',

'stylus-loader'

]

}

重新执行npm run dev 打包即可。

stylus基本语法

我是做的饿了吗项目，所需语法不多，这里写一下我用到的语法

*.vue

这里在style设置了属性后，就可以写stylus语法了。

stylus语法

1、可以省略分号以及冒号

2、缩进代表父子级

一段stylus代码

.list-item

.text-box

span

background-color: $background-color

margin: add(10)

padding: add(10, 5)

&:hover

background-color: powderblue

编译后：

.list-item span,

.text-box span {

background-color: #add8e6;

margin: 20px;

padding: 15px

}

.list-item:hover,

.text-box:hover {

background-color: #b0e0e6;

}

这是我目前用到的基本语法，详细请见官网

参考文档：