These are chat archives for AngularClass/NG6-starter

30th
Oct 2017
Matias Fernandez Martinez
@thematho
Oct 30 2017 00:32
Hi @gadzhimari if you have your fonts locally on your project adding the @importon your CSS should be enought, example using Angular Material Icons:
On my CSS file:
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(MaterialIcons-Regular.woff2) format('woff2'), url(MaterialIcons-Regular.woff) format('woff'), url(MaterialIcons-Regular.ttf) format('truetype'); }
(Those files are on the CSS file folder, I mean the path should be relative to the CSS import statement on the CSS)
My webpack config:
loaders: [ { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' }, { test: /\.html$/, loader: 'raw' }, { test: /\.(scss|sass)$/, loader: 'style!css!sass' }, { test: /\.css$/, loader: 'style!css' }, { test: /\.(eot|woff|woff2|gif|jpg|svg|png|ttf)([\?]?.*)$/, loader: "file-loader" } ]
Gadzhimari Kachaev
@gadzhimari
Oct 30 2017 06:08
@thematho thank you for reply but still not helpful. Let me explain in detail. I have a folder called fonts and put it near with base style folder, which have file called _typography.scss
2017-10-30_09-02-40.png
In this file I import fonts from fonts folder
I tried to use couple of ways but none of this works
src: url('MaterialIcons-Regular.woff2) format(woff2),
        url('MaterialIcons-Regular.woff) format(woff)

src: url('./MaterialIcons-Regular.woff2) format(woff2),
        url('./MaterialIcons-Regular.woff) format(woff)

src: url('../MaterialIcons-Regular.woff2) format(woff2),
        url('../MaterialIcons-Regular.woff) format(woff)
Gadzhimari Kachaev
@gadzhimari
Oct 30 2017 06:14
Here my project structure, where you can see that fonts folder on same level as style folder, there I import fonts
2017-10-30_09-05-11.png
Matias Fernandez Martinez
@thematho
Oct 30 2017 11:47
@gadzhimari the relative path to the font should be relative to the font face statement. Change the path to:
'./fonts/Material-XXXXX.woff'
You are declaring the font face on the _base.scss file
Gadzhimari Kachaev
@gadzhimari
Oct 30 2017 18:16
@thematho I solved this problem when I moved the fonts folder on same level as app.scss file, where I import all my partials scss. I don't why it so strange behaviour. If I declare on the _typography.scss my font-face rules, why should I write different path which not relative to the _typography.scss file.
Matias Fernandez Martinez
@thematho
Oct 30 2017 20:00
Hi @gadzhimari I think I found the difference.
I have a vendors.jsfile in which I'm importing: ./some-vendor/some.scssusing JS
Inside that file, the SCSS is doing the font-face and is using the relative path to some.scss. The thing that is happening on your case is that the SASS compilation is being compiled to your app.scss path, that's why you need the relative path from app.scss in order to webpack found the files for load them.
@gadzhimari Makes sense?