In an Angular2 application, I have a file loader setting in the webpack configuration, for example:
{
test: /\.(eot|svg|ttf|woff|woff2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file?name=/assets/fonts/[name].[ext]'
}
I also have this elsewhere in config:
modulesDirectories: ['node_modules']
As I understand it, the file loader looks for the node_modules folder for any files matching the specified expression (in this case, font files) and copies them to the folder /assets/fontsin the assembly output. However, this works because files are not copied to the destination folder. What am I missing?
On the side of the note, I would also like to know how conflicts are handled since there node_modulesmay be files in multiple packages with the same name.
Additional information: The file vendor.scsscontains the following: $ zmdi-font-path: "assets / fonts"; @import "~ material-design-iconic font / scss / material -design-iconic-font.scss";
In this case, sass-loader applies this to get the following css:
@font-face {
font-family: 'Material';
src:url('assets/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0') format('woff2'),url('assets/fonts/Material-Design-Iconic-Font.woff?v=2.2.0') format('woff'),url('assets/fonts/Material-Design-Iconic-Font.ttf?v=2.2.0}') format('truetype');
font-weight: normal;
font-style: normal;
}
The two above steps will cause a request from the browser to the font file in assets/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0. This does not happen until the runtime is completed. Where would I requirefile to be copied to assets / fonts during build?
I also use sass-loaderin the pipeline: {test: /. Scss $ /, loaders: ['raw-loader', 'sass-loader']}
and include sass in my component as follows:
styleUrls: [
'./../assets/scss/main.scss'
]
I see that css is included in HTML if it is visible from the browser, but calls to fonts return 404.