baseHref not resolved in imported scss files

[florian-kittel]

🐞 Bug report

Command (mark with an x)

- [x] build

Is this a regression?

Yes, the previous version in which this bug was not present was: 7.3.9

Description

We have an internal library, that provides scss files for the company styles. In one of the files called fonts.scss are references to the corporate fonts. We ship the fonts for internal projects within our library.

🔬 Minimal Reproduction

In the angular.js we copy the fonts to a project by using the following config:

  "projects": {
    "our-project": {
       ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "assets": [{
                "glob": "**/*",
                "input": "./projects/our-lib/assets/fonts/",
                "output": "./assets/fonts/"
              },

In our fonts.scss we refer to the fonts by:

@font-face {
  font-family: 'OurFont';
  src: url('/assets/fonts/OurFont_W_Rg.eot');
  src: url('/assets/fonts/OurFont_W_Rg.eot?#iefix') format('embedded-opentype'),
      url('/assets/fonts/OurFont_W_Rg.woff2') format('woff2'),
      url('/assets/fonts/OurFont_W_Rg.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
...

This works well on ng-serve because the fonts will linked into the root/assets folder correctly. When we add a baseHref in version 7, it was added through src: url('/assets/fonts/OurFont_W_Rg.eot'); and as result by using a baseHref of "/our-app/" we get the correct result src: url('/our-app/assets/fonts/OurFont_W_Rg.eot'); inside styles.js or styles.css.

🔥 Exception or Error

With version 8 it is not replaced by the build.

🌍 Your Environment

Angular CLI: 8.0.2
Node: 10.14.1
OS: win32 x64
Angular: 8.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.2
@angular-devkit/build-angular     0.800.2
@angular-devkit/build-optimizer   0.800.2
@angular-devkit/build-webpack     0.800.2
@angular-devkit/core              8.0.2
@angular-devkit/schematics        7.3.8
@angular/cli                      8.0.2
@angular/flex-layout              7.0.0-beta.24
@angular/http                     7.2.15
@ngtools/webpack                  8.0.2
@schematics/angular               8.0.2
@schematics/update                0.800.2
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

[alan-agius4]

This is working as intended.

Kindly see #14587 (comment) for more context.

[florian-kittel]

@alan-agius4 I don't get the point from the #14587 why you have done this? It is not possible to add relative urls in the scss file when you will include shared assets files via glob (https://github.com/angular/angular-cli/wiki/stories-asset-configuration). It was only possible to use absolute urls in the scss file, as you can read here as well: #14587 (comment)

As I said, we provide a component library for the hole company by using this concept, that worked since the update to Angular 8. That includes normal fonts and icon font files. This breaking change stops us at the moment to move to Angular 8 for all projects.

The CLI (8.0.2) give me Unknown option: '--rebase-root-relative-css-urls' or Unknown option: '--rebaseRootRelativeCssUrls' for the solution mentioned in the other issue.

So there is no solution for that. The issue can't ignored and closed.

[alan-agius4]

HI, I think you are trying to use the --rebase-root-relative-css-urls on ng serve.

This option is only available for the build target and hence you should either provide it in the CLI when doing ng build or set it in angular.json in the browserTarget which ng serve will use.

Example:

  "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
           ...
           "rebaseRootRelativeCssUrls": true

I am not fully aware of the component library that you are using and it's architecture but in generally speaking a library that providing uncompiled SCSS should offer the functionality to configure the paths of the assets location.

The most common pattern, is that libraries provide a variable to modify the assets path. bootstrap-sass for example has an $icon-font-path while material.

Can you kindly go through why do you need the baseHref set in the first place?

[florian-kittel]

Thanks for the hint. Yes I tried it on serve. I tried to check the integration and changes directly.

Our company needs to provide different themes for our brands. We deliver standardized components with the library for all brands. The brand can be activate its theme by including the needed scss file only inside its there Angular App. And the core team maintain the style guide and the components.

We have applications in a closed intranet or with no internet connection beside public applications, so we are not able to deliver fonts or icons via CDN. There are also themes that uses licenced fonts, that we couldn't put on our CDN. So best approach was to deliver all scss and assets with our lib. Then we are able to update the theme and asses by a library release and the project doesn't need to care about.

We use the default Angular projects workspace and beside the libraries we have a showcase applications, where we can see the components directly at development time and later as deployed application internally. That works perfect since the update to Angular 8, because of the mentioned problem.

Before that for us it was given out of the box, that the baseHref was set correctly by the cli. Every "end" application that is build has a different base path, so that is a core functionality for us.

Like you, we want that the user of our library needs to configure as less as possible. That was the reason, why it works well with the Angular project / library set up. Of course, to enable the scss part, I wrote a script that puts the scss files beside the final lib after the build is finish before we publish it.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}