vue cli3.0中如何全局引用stylus文件

不知道大家遇见过没有，在vue中引用全局的global.styl的过程中，如果我单纯在main.js中引入并不能在全局中生效。但是global.styl作为我的全局公用样式，我不可能在每个vue文件中进行重复引用，于是只能度娘一番了。

首先安装

cnpm i style-resources-loader -D

然后在vue.config.js做一些基本配置

var path = require('path')
var express = require('express')
var proxy = require('http-proxy-middleware')

function resolve (dir) {
    return path.join(__dirname, dir)
}

function addStyleResource (rule) {
    rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
        patterns: [
            path.resolve(__dirname, 'src/common/stylus/global.styl')
        ]
    })
}

module.exports = {
    lintOnSave: false,
    devServer: {
        
    },
    chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
        config.resolve.alias
            .set('pages', resolve('src/pages'))
            .set('common', resolve('src/common'))
            .set('components', resolve('src/components'))
    },
    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.ywy5t.com',
                changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
                // secure: false,  // 如果是https接口，需要配置这个参数
                pathRewrite: {
                    '^/api': ""
                }
            }
        }
    }
}

红框中代码

上图中实现全局配置stylus文件的代码主要集中在红色框框中，重启即可发现支持了stylus的全局配置。

那么问题来了，如果我们需要全局配置多个stylus的文件怎么办呢？很简单，我们可以在global.styl中引入需要配置的stylus，如下图：

配置多个stylus

这里我们就全局引入了global.styl和common.styl，还引入了公用的重置样式reset.css。关于vue-cli中CSS预处理这块可以参考官方文档css预处理。