Compiler-cli Error: Compilation failed. Resource file not found: import..... .scss

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When running the command

node_modules/.bin/ngc -p tsconfig-aot.json

the following result occurs:

Error: Compilation failed. Resource file not found: /Users/xxxxx/xxxxx/xxxxx/xxxxx/__scss/global at ModuleResolutionHostAdapter.readResource (/Users/xxxx/xxxxx/xxx/xxxxx/node_modules/@angular/compiler-cli/src/compiler_host.js:369:19) at CompilerHost.loadResource (/Users/xxxxx/xxxxx/xxxx/xxxx/node_modules/@angular/compiler-cli/src/compiler_host.js:243:85) at Object.get (/Users/xxxx/xxxx/xxxxx/xxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:24571:107) at DirectiveNormalizer._fetch (/Users/mbp06/xxxx/xxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:13206:43) at /Users/mbp06/xxx/xxxxx/xxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:13334:53 at Array.map (native) at DirectiveNormalizer._loadMissingExternalStylesheets (/Users/mbp06/xxx/xxxx/xxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:13334:14) at /Users/mbp06/xxxx/xxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:13337:26 at process._tickCallback (internal/process/next_tick.js:109:7) at Module.runMain (module.js:607:11) Compilation failed

Expected behavior

Minimal reproduction of the problem with instructions the issue is similarly seen here https://github.com/swimlane/ngx-datatable/issues/459

What is the motivation / use case for changing the behavior? AOT won’t compile

Please tell us about your environment:

MacOs, VS code, npm

• Angular version: 2.0.X Angular 4.0.3

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5] Node 7.9 TypeScript 2.3.0 Angular 4.0.3

• Node (for AoT issues): node --version =

[marclaval]

I could reproduce the issue thanks to this repo.

The root cause is that Angular only supports @import for standard CSS files, but not the extended version of Sass, which is documented here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import

AFAIK, there is no plan to natively support Sass in Angular. So, such transformation should be done as a pre-process before running ngc.

@tbosch Can you confirm please?

[xtianus79]

Our first Angular 2 app launched in production and we were not able to utilize the AOT configuration. This is going to be my last effort on this subject to ask you wonderful people to reconsider this decision.

@tbosch @IgorMinar @jelbourn @mmathys @mary-poppins @DzmitryShylovich

If you support css and support using a file such as scss why would you not support the basic functionality of what that file does. All we are asking here is for the file to do what it does as natively. Which by the way is the same thing a css file does. @import.

Now, I am understanding of the consideration of not supporting it but really what is the harm or reason for not supporting it? Is it difficult or to complex to code for? I don’t think that is it. Is it something else to maintain? Perhaps, but this is an open source project. I am sure there are scores of people that would want this functionality that would be happy to maintain this segment of code.

This type of configuration exists in the CLI but not in a native webpack configuration not using the cli. That seems very counterproductive and a limiting reagent to forcing everyone to use angular-cli. Now I have no issue using angular cli but like I have said before it is to boxy in configuration and limiting… perhaps that has changed and configuration is more open as I have not tried it out in some time.

Also, where is the miscommunication coming from. Either you guys aren’t understanding our build process and why this is important or we are not understanding your proposal for an alternative.

Let’s be fair here, if there is an alternative let’s propose it and work through what that build process would look like… If it is fair and feasible let’s document it and let it exist for those who need to utilize it. If it is not fair and feasible can you all then consider adding this functionality in.

So in the end I propose we work together and get this issue resolved and not just let it linger. I am more than willing to do anything to help and document the final results but this issue is a little frustrating and I want to tackle it.

Thanks for your consideration