Utilizing Webpack allows us to establish resolve aliases and integrate them within our CSS stylesheets.
resolve: {
extensions: ['.js', '.vue', '.json', '.scss', '.css'],
alias: {
'fonts': path.join(__dirname, 'assets/fonts'),
'images': path.join(__dirname, 'assets/images')
}
}
I'm curious about the necessary steps to implement these aliases and apply them to our LESS/SCSS files:
- For Images: background-image: url(~imagesalias/images/image.png);
- For Fonts: src: url('~fontalias/fonts/font.ttf') format('truetype');
Here's the current setup of my CSS/SCSS loader for development purposes:
module: {
rules: [
{
test: /\.css$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "resolve-url-loader"
}]
},
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "resolve-url-loader"
}, {
loader: "sass-loader"
}]
}
]
}