Build warnings after migrating to Angular 12.0.0 for external .css files `Unable to locate stylesheet`

See original GitHub issue

Hi there!

After migrating my project to version 12.0.0, I get the following messages for external .css files when I issue the command ng build:

  • Generating index html…Unable to locate stylesheet: C:\myproject\ClientApp\dist\https:\somedomain\somefile.min.css

Also when running the command ng serve, I get the corresponding warning messages for the same files.

The references (there are two such files) are in the <head> section of my index.html

<link rel="stylesheet" href="https://somedomain/somefile.min.css">

The application is correctly compiling otherwise, and runs correctly.

Thanks a lot for your attention.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:5
  • Comments:16 (5 by maintainers)

github_iconTop GitHub Comments

5reactions
grichards23commented, Jun 2, 2021

I just came here to report the same thing. All of our projects refer tot he same set of global styles at our organization so we add the following to the index.html of each project

<link rel="stylesheet" type="text/css" href="https://internalcdn.com/Apps/CSS/StyleSheet.css">

Now with Angular 12, we get this warning every time we build…

Unable to locate stylesheet: C:\dist\https:\internalcdn.com\Apps\CSS\StyleSheet.css

As @jlquijada stated, the resulting build is still correct and the site works as expected.

3reactions
lyczoscommented, Jul 9, 2021

I’m having the same issue while using https://github.com/angular/universal Turning off inlineCriticalCss in ngExpressEngine options seems to work for me at least for SSR.

// server.ts
ngExpressEngine({
      bootstrap: AppServerModule,
      inlineCriticalCss: false
})

As far as I see it is caused by Critters:getCssAsset() - it’s trying to resolve external assets (ex. from CDN) on local path

 var normalizedPath = href.replace(/^\//, '');
                    var pathPrefix = (publicPath || '').replace(/(^\/|\/$)/g, '') + '/';
                    if (normalizedPath.indexOf(pathPrefix) === 0) {
                        normalizedPath = normalizedPath.substring(pathPrefix.length).replace(/^\//, '');
                    }
                    var filename_1 = path.resolve(outputPath, normalizedPath);
                    var sheet_1;
                    var _temp5 = _catch(function () {
                        return Promise.resolve(_this3_1.readFile(filename_1)).then(function (_this3$readFile) {
                            sheet_1 = _this3$readFile;
                        });
                    },
Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular unable to locate stylesheet warning - Stack Overflow
Edit: This warning is caused by new update in polyfills. Solution is: Remove all bootstrap cdn links from index.
Read more >
How to get a warning while running ng serve for angular 12 ...
How do you get a warning while running ng serve for angular 12 when unable to locate stylesheet: c:\workstation\fe\assets\CSS\core.CSS (CSS, stylesheet ...
Read more >
Angular CLI 13.1.0-next.0 Release - GitClear
#22022. Build warnings after migrating to Angular 12.0.0 for external .css files `Unable to locate stylesheet`.
Read more >
Angular Unable To Locate Stylesheet Warning - ADocLib
The command can be used to build a project of type application or library. ... warnings after migrating to Angular 12.0.0 for external.css...
Read more >
Style Sheets | IntelliJ IDEA Documentation - JetBrains
Open the HTML file with a CDN link to an external CSS library. ... To find usages of a Style Sheet symbol, place...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found