Angular-cli doesn't resolve relative paths for css imports

[tamtakoe]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Ubuntu: 17.10
node: 11.1.0
npm: 6.4.1
ng: 7.0.6

Repro steps

Clean project, use SCSS by default.

style.scss (defined in the default angular.json)

@import 'styles/app.scss';

styles/app.scss

@import 'lib.css';

The log given by the failure

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'lib.css'
  in [
    /home/username/dev/angular-test/src
  ]
    at resolveModule.catch.catch (/home/username/dev/angular-test/node_modules/postcss-import/lib/resolve-id.js:35:13)

If add ./ prefix - the same result

Desired functionality

It works if lib.css imported by @import 'styles/lib.css'; but @import should be resolved by relative path

[alan-agius4]

Hi, this is the expected behavior.

At the moment, style preprocessors don't offer a way to plugin to their file resolution, thus you'd have the same result if you use any SCSS preprocessor directly.

The preprocessor will not try to resolve the CSS imports and they will be left as they have been declared. Thus if you have an import in a nested way like yourself, your final output will still be lib.css and will be become relative to the emitted file. This is similar to other resources, such as fonts, background-url and so on.

[tamtakoe]

There is no the same problem if I use SCSS through Webpack. Moreover I have Webpack based build system which resolves paths correct. This problem appears if I replace this build to Angular-CLI.

P.S. How should I resolve this cases? Rewrite paths manually for third-part plugins? Set they up in angular.json files?

[alan-agius4]

Usually third-party libs provide variable to set the paths of the resources.

Can you share an example where this works with webpack directly? As based on their docs this is not handled out side of the box https://webpack.js.org/loaders/sass-loader/#usage

There is https://github.com/bholloway/resolve-url-loader which can be used to resolve paths, but this is a huge workaround as it relies on sourceMaps to resolve paths.

[tamtakoe]

@alan-agius4 Yes, that was this loader in my Webpack project. So, that is really SASS problem. Maybe you know if SASS repo has the issue? I can't find it

[alan-agius4]

@tamtakoe, I don't think there is an open issue, as really it is a problem for all styles preprocessors and not only SCSS.

[ermarkar]

I am facing the same issue. Created an angular-cli base project with scss as the stylesheet. Imported third part lib's scss into my project. That further uses

@font-face {
    font-family:"Roboto Regular";
    font-weight:normal;
    font-style:normal;
    src: url("../resources/fonts/roboto-regular/Roboto-Regular.eot?") format("eot")
}

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)

Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError:

---------------sass\third-party.scss:10:9: Can't resolve
'../resources/fonts/roboto-regular/Roboto-Regular.woff' in 'MyProject\src'

8 | font-style:normal;
9 | src: url("../resources/fonts/roboto-regular/Roboto-Regular.eot?") format("eot"), /* IE9 Compat Modes */

10 | url("../resources/fonts/roboto-regular/Roboto-Regular.woff") format("woff"), /* Pretty Modern Browsers /
| ^
11 | url("../resources/fonts/roboto-regular/Roboto-Regular.ttf") format("truetype"); / Safari, Android, iOS /
12 | / url("../../resources/fonts/roboto-regular/Roboto-Regular.svg#Roboto-Regular") format("svg"); / / Legacy iOS */

In the third party library there is resources folder. But same issue angular-cli is resolving this path relative to m project's styles.scss file? Any solution so far?

[clydin]

Unfortunately, this is a limitation of sass/scss itself. It does not rebase URLs.

[michaelcm]

I'm running into a relative (or not relative) path issue too. I'm confused about the comments saying this is standard SCSS behaviour. I think the focus here should be about the fact that the behaviour has changed between angular releases. For example, in @angular version 5.1.2, I was able to use this in my src/styles.scss file:

$fa-font-path: "~font-awesome/fonts/";
@import 'node_modules/font-awesome/scss/font-awesome.scss';

And the angular build would generate hashed font files and a URL like this:

http://host/root-path/fontawesome-webfont.af7ae505a9eed503f8b8.woff2

But after upgrading to @angular version 7.1.3, the ng build, this no longer includes the font files at all from node_modules and results in URLs for the font files like this:

http://host/root-path/~font-awesome/fonts//fontawesome-webfont.woff2?v=4.7.0

I've been playing around with different formatting the paths and having this work in angular 7.1.3, but haven't been able to make it hash or include the font files at all. Is there another issue that more closely captures this issue or that can guide me down the right path?

[clydin]

@michaelcm that's an unrelated problem to what @ermarkar is describing. The use of the tilde is the source of the problem in this case. It is not officially supported and only previously worked due to the internal use of certain webpack loaders in previous versions.

The following works with a new 7.1.4 CLI project:

$fa-font-path : '../node_modules/font-awesome/fonts';
@import '../node_modules/font-awesome/scss/font-awesome';

Also of note is that if SASS actually rebased URLs, then there would be no need to use $fa-font-path.

[michaelcm]

Thank you for the clarification. Sorry, I think I'm unclear on the use of the term rebased URLs. I assumed that meant the transform from something like http://host/root-path/../node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 to something like http://host/root-path/fontawesome-webfont.af7ae505a9eed503f8b8.woff2.

Either way you're right, all good and off topic.

[milky2028]

Is there any progress on this? I'm trying to build Angular with Closure Compiler, but when I hook into the ngc build step, all my .scss paths fail.

[aruballo]

I am having the same issue with a library I am trying to build; if I use the following import which uses an alias '@Opus':

@import '~@opus/widgets/core';

The build fails with:
ERROR: returned value of file must be a string
An unhandled exception occurred: returned value of file must be a string

If I change it to this:
@import '../../widgets/core';

It works. The problem is I am porting over an existing project and it is not feasible to change every stylesheet from using the alias that was working before. Where do I define aliases that the scss files can use? The typescript aliases do nothing.