Hi there,
I want change alias in css-loader in bud:
In webpack config, I can use these lines code:
use: [{
loader: 'css-loader',
options: {
importLoaders: 1,
alias: {
"../fonts": "font-awesome/fonts"
}
}
}
How can I use this config in bud.config.js.
Thanks.
Hi @hieu0nguyen
I don’t know that I fully understand what you’re trying to do.
Here it looks like you’re trying to modify the options for css-loader
but that loader doesn’t have an alias
option.
If you just want to reference ./node_modules/font-awesome/fonts
in your stylesheet you can already do that using ~
url(~font-awesome/fonts)
See the docs on the css-loader ~
convention:
If you want to change where the @fonts
alias in bud points to you can do so with bud.alias
.
bud.alias({['@fonts']: bud.path('modules', 'font-awesome/fonts')})
Or, make a new one for font-awesome/fonts
specifically:
bud.alias({['@fa']: bud.path('modules', 'font-awesome/fonts')})
The ~
convention resolves webpack aliases so you can reference resources/fonts
out of the box with sage 10.
url(~@fonts/my-font.otf)
Or, an image:
url(~@images/my-picture.png)
And so on. Hope that helps.
2 Likes
Hi @kellymears
Thank you for your reply. But your answer not what I mean in my question.
I want to import CSS fontawesome in my app.css, so I use this:
@import '@fortawesome/fontawesome-free/css/all';
But when I run, it’s said:
Error: Can't resolve '../webfonts/fa-regular-400.woff2' in './resources/styles'
Because these font’s paths not correct. So I found a solution is use alias in css-loader in webpack.config file
use: [{
loader: 'css-loader',
options: {
importLoaders: 1,
alias: {
"../fonts": "font-awesome/fonts"
}
}
}
But in bud, I could not see this config to change path …/fonts reference to /node_modules/font-awesome/fonts.
So I want to ask how can I use alias path in bud.config.js.
Thanks.
2 Likes
doug
4
@hieu0nguyen - I didn’t see your post initially but I posted a similar issue here Fontsource fonts imports via Bud - path can't be resolved during yarn build
Did you ever find a solution?