Roots Discourse

How can I add css-loader alias in bud.config

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.