我如何在 Vue CLI 3 中使用 stylus-resources-loader?
How do I use stylus-resources-loader with Vue CLI 3?
我知道它涉及到修改 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;
});
},
};
更新:
需要注意的是<style lang="stylus">
中lang
属性的值会影响配置项的写法!
当lang
为stylus
时,stylus
挂载在loader
上,应该这样写:options.loaders.stylus
,当[=12=的值]是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')
}
}
参考
我知道它涉及到修改 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;
});
},
};
更新:
需要注意的是<style lang="stylus">
中lang
属性的值会影响配置项的写法!
当lang
为stylus
时,stylus
挂载在loader
上,应该这样写:options.loaders.stylus
,当[=12=的值]是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')
}
}
参考