我知道这涉及到修改vue.config.js
,但是仅将所需的配置粘贴到configureWebpack
对象中似乎无效。还有其他人能够弄清楚这一点吗?
所需的配置以添加:
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: "vue-loader",
options: {
loaders: {
stylus: [
{
loader: "stylus-resources-loader",
options: {
resources:
"./src/assets/_base.styl",
},
},
],
},
},
},
],
},
],
},
谢谢!
最佳答案
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;
});
},
};
更新:
请注意,
lang
中<style lang="stylus">
属性的值将影响配置项的写入方式!当
lang
为stylus
时,stylus
安装在loader
上,应这样写:options.loaders.stylus
,当lang
的值为styl
时,应将其写为options.loaders.styl
。由于
@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')
}
}
引用https://stackoverflow.com/a/49086022/4723163
关于vue.js - 如何在Vue CLI 3中使用stylus-resources-loader?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48750182/