Vue 中全局引入 stylus

本文主要是介绍Vue 中全局引入 stylus，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、安装

二、vue.config.js 中配置

三、主题切换

一、安装 Style Resources Loader

Style Resources Loader 的作用官网有说明：

百度翻译：

此加载程序是用于webpack的CSS处理器资源加载程序，它将您的样式资源（例如变量、混合）注入到多个导入的CSS、sass、scss、less、stylus 模块中。

它主要是用来

在所有样式文件中共享变量、混合项和函数，因此不需要手动@import它们。

覆盖其他库（例如ant design）提供的样式文件中的变量，并自定义自己的主题。

npm i style-resources-loader -D

二、vue.config.js 中配置

主要是方法 importStylus，然后在 module.exports.chainWebpack 中引入。

配置完成后，一定要重启项目才生效。

const webpack = require('webpack');
const path = require('path');function resolve(dir) {return path.join(__dirname, dir);
}// 加载 stylus 文件，可以是多个
function importStylus (rule) {rule.use('style-resource').loader('style-resources-loader').options({patterns: [path.resolve(__dirname, 'src/assets/stylus/global.styl')]})
}module.exports = {      css: {extract: false},// 它支持webPack-dev-server的所有选项devServer: {host: 'localhost',// host: '192.168.82.64',port: 8086, // 端口号https: false, // https:{type:Boolean}open: true, //配置自动启动浏览器proxy: {'/tiles': {target: 'http://localhost:6768',changeOrigin: true,pathRewrite: {'/tiles': ''}}}},chainWebpack(config) {// 引入 stylusconst types = ['vue-modules', 'vue', 'normal-modules', 'normal']types.forEach(type => importStylus(config.module.rule('stylus').oneOf(type)));// 别名设置config.resolve.alias.set('@', resolve('src')).set('@components', resolve('src/components')).set('@images', resolve('src/assets/images')).set('@stylus', resolve('src/assets/stylus')).set('@libs', resolve('public/libs'))}};