How do I use stylus-resources-loader with Vue CLI 3? - vue.js

Question

I know that it involves modifying vue.config.js, but simply pasting my desired config in the configureWebpack object doesn't seem to work. Has anyone else been able to figure this out?
Desired config to add:
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: "vue-loader",
options: {
loaders: {
stylus: [
{
loader: "stylus-resources-loader",
options: {
resources:
"./src/assets/_base.styl",
},
},
],
},
},
},
],
},
],
},
Thank you!

Answer 1

const path = require('path');
module.exports = {
chainWebpack: (config) => {
config.module
.rule('vue')
.use('vue-loader')
.tap((options) => {
options.loaders.stylus = options.loaders.stylus.concat({
loader: 'stylus-resources-loader',
options: {
resources: path.resolve('./src/assets/_base.styl'),
},
});
return options;
});
},
};
UPDATE:
It should be noted that the value of the lang attribute in <style lang="stylus"> will affect the way the configuration item is written!
When lang is stylus, the stylus are mounted on loader, which should be written like this: options.loaders.stylus, and when the value of lang is styl, It should be written as options.loaders.styl.
Because of the following code in #vue/cli-service/lib/webpack/CSSLoaderResolver.js:
getLoader (test, loader, options = {}) {
styl (test = /\.styl$/) {
return this.getLoader(test, 'stylus')
}
stylus (test = /\.stylus$/) {
return this.getLoader(test, 'stylus')
}
}
refer to https://stackoverflow.com/a/49086022/4723163