如何在mpvue中使用stylus,并配置全局变量文件

深藏阁楼爱情的钟 2022-03-15 01:12 299阅读 0赞

# 一、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标签放入不想补全的样式即可，如下图