一、stylus的介绍
这个兄弟学名叫 stylus,是 CSS 的预处理框架。 CSS 预处理,顾名思义,预先处理 CSS。那 stylus 咋预先处理呢?stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件,执行这一套骚操作之后,这个文件可编译成 CSS 文件
二、为何使用stylus和配置
在每一个需要使用变量的component组件中都需要单独引入index.styl文件,不仅进行了多次重复性的操作,而且文件名称一旦发生改变,维护更新非常麻烦,非常的不人性化。
三、stylus的基本使用
1、在项目目录下,安装stylus、stylus-loader包
npm i stylus stylus-loader -D
2、webpack中的配置
//配置文件修改 build/webpack.base.conf.js
rules中添加,如下图所示
{
test: /\.styl$/,
loaders: ['style-loader', 'css-loader', 'stylus-loader']
},
复制代码
3、配置文件build/until.js
在generateLoaders方法的后面!后面!后面!(强调) 如下图
const stylusOptions = {
import: [path.join(__dirname, "../src/stylus/variables.styl")], //你公共样式存放的位置
paths: [path.join(__dirname, '../src/stylus'), path.join(__dirname, '../')] //公共样式文件位置
}
return {
css: generateLoaders(),
wxss: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus', stylusOptions), //红色文字对应上方配置
styl: generateLoaders('stylus')
}
复制代码
4、最后重启
修改配置文件后,一定要记得重启服务
四、mpvue中使用stylus
1、app.vue中引入
index.styl //统一入口
@import "./mixin.styl"
@import "./reset.styl"
@import "./common.styl"
@import "./variables.styl"
复制代码
2、variables.styl存放全局变量
variables.styl
//主题颜色
themeColor = #027fff
//白色
whiteColor = #ffffff
//黑色
blackColor = #000000
//通用灰色
grayColor = #b2b2b2
//背景色
backGroundColor = #f4f5f5
//边框色
borderColor = #e1e1e1
//消息提醒框背景色
messageBackgroundColor = red
//主文本颜色
textColor = #666666
//足迹主题颜色
footColor = #49EAE5
复制代码
3、页面使用
五、注意事项
由于使用了stylus后会自动补全样式,所以会导致有些样式在小程序下无法支持,这时候只需要再添加一个style标签放入不想补全的样式即可,如下图