I want to alias the the relative font and image imports in my css and scss modules with absolute paths. The goal is store all of my font and image files in two central folders, without going through every css file and changing the relative imports, which would be difficult especially with minified third party stylesheets like bootstrap. I'm not making much progress and setting the aliases is causing many of my relative imports to not resolve when running webpack.
Is it possible to achieve this folder structure using the alias option?
css-loader in the webpack config object
{
test: /\.(sass|scss|css|)$/,
use: ExtractTextPlugin.extract({
fallback: { loader: 'sass-loader' },
use: {
loader: 'css-loader',
options: {
alias: {
'../fonts': path.resolve(__dirname, 'front_end/fonts'),
'./fonts': path.resolve(__dirname, 'front_end/fonts'),
'../images': path.resolve(__dirname, 'front_end/images'),
'./images': path.resolve(__dirname, 'front_end/images'),
}
}
},
})
},
The project is a large muti-page jQuery app with one webpack entry point per page