unable to use SASS in imported styles

[xetys]

Overview of the issue

since we switched to AOT and angular 4, it is no longer possible to use vendor SASS files ins component SASS files, which include them

Motivation for or Use Case

if any sass library provides helpers, like bootstrap or angular-material, which ship helper mixins, variables and more, I want to use them. This of course means, there is a need for including it. But this runs into an AoT error.

Reproduce the error

take a fresh JHipster Angular 4 application with SASS enabled. Then pick any component, which includes a style. Like NavbarComponent or HomeComponent

Add

@import '~bootstrap/scss/bootstrap';

for testing purposes.

then a

$ ngc -p tsconfig-aot.json 
Error: Compilation failed. Resource file not found: /home/david/Projekte/kloud2017/user-management-center/src/main/webapp/app/layouts/navbar/~bootstrap/scss/bootstrap
    at ModuleResolutionHostAdapter.readResource (/home/david/Projekte/kloud2017/user-management-center/node_modules/@angular/compiler-cli/src/compiler_host.js:362:19)
    at CompilerHost.loadResource (/home/david/Projekte/kloud2017/user-management-center/node_modules/@angular/compiler-cli/src/compiler_host.js:236:85)
    at Object.get (/home/david/Projekte/kloud2017/user-management-center/node_modules/@angular/compiler/bundles/compiler.umd.js:24053:107)
    at DirectiveNormalizer._fetch (/home/david/Projekte/kloud2017/user-management-center/node_modules/@angular/compiler/bundles/compiler.umd.js:12779:43)
    at /home/david/Projekte/kloud2017/user-management-center/node_modules/@angular/compiler/bundles/compiler.umd.js:12904:53
    at Array.map (native)
    at DirectiveNormalizer._loadMissingExternalStylesheets (/home/david/Projekte/kloud2017/user-management-center/node_modules/@angular/compiler/bundles/compiler.umd.js:12904:14)
    at /home/david/Projekte/kloud2017/user-management-center/node_modules/@angular/compiler/bundles/compiler.umd.js:12907:26
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at Module.runMain (module.js:606:11)
Compilation failed
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

will occur.

Suggest a Fix

To be honest, I have very little idea how to fix that, as this is a hardcore AOT, Webpack and Angular issue. I'll still try to figure it out

JHipster Version(s)

tested and reproduced with 4.3.0 and 4.4.1.

JHipster configuration

• angular 4

• SASS enabled

• [x] Checking this box is mandatory (this is just to show you read everything)

[mmaask]

Ran into same the issue. Is there anything that can be changed about that in jhipster? I feel like we should be able to use mixins at component level styling.

[Pomanks]

Got the same issue here too, the project is running though but not pretty having an error when trying to install the project .. 😔 If anyone resolved it, feel free to share it! 😉

[mmoscher]

Same issue for me .. upgraded to the recent version and migrated from angular2 to angular4. Now I'm stuck here as well. :pensive:

[deepu105]

Guys could you try to import it like this instead of ~? @import "node_modules/bootstrap/scss/bootstrap";

[deepu105]

@xetys @Vaelyr @mmoscher its actually not a good idea to import non partial files in multiple places as itt will generate duplicate css from them and cause issues. Partial files will have _ preceding the file name so if you do want to import them do so using the exact file for eg: @import "node_modules/bootstrap/scss/mixins/border"; I'll wait fro feedback for sometime before closing this

[deepu105]

I tried this (@import "node_modules/bootstrap/scss/mixins/border-radius";) in home.scss and it works ofcourse it will throw an error since a variable is missing so you also need to import node_modules/bootstrap/scss/variables so for me it works and its the correct way to do it. I'm gonna close and document this

[mmaask]

It shouldn't generate duplicate css, this is handled by the processor. Else there would be no way to use mixins and base css in any component level styling.

[deepu105]

I wish it was handled, I didnt test here but on a react + webpack project it does create duplicate thats why people use partial files (with_ prefix) so sass knows not to generate them

[mmaask]

I didn't see that the OP tried to include non-partial, this is something I would avoid. My concern was for partials, these have to be imported via absolute path to be able to compile with AoT.

[dancancro]

I'm having sass problems that might be related to this. I'm not sure whether what I want to do isn't doable or if I'm just doing something wrong. Advice would be much appreciated.

I am trying to add this dashboard demo as a feature to my app. It uses several sass modules and fonts which are declared globally in the project's .angular-cli.json file. I would like these styles to apply to components within this feature only and not the entire application.

My understanding of both sass and style modules is very basic. There's probably something wrong with my webpack.common.js too.

My errors look like this:

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./src/main/webapp/app/features/dashboard/dashboard.page.scss
Module not found: Error: Can't resolve '../fonts/ionicons.woff?v=2.0.1' in '/Users/Dan/work/gba/src/main/webapp/app/features/dashboard'
 @ ./~/css-loader!./~/sass-loader/lib/loader.js!./src/main/webapp/app/features/dashboard/dashboard.page.scss 6:67172-67213
 @ ./src/main/webapp/app/features/dashboard/dashboard.page.scss
 @ ./src/main/webapp/app/features/dashboard/dashboard.page.ts
 @ ./src/main/webapp/app/features/dashboard/dashboard.module.ts
 @ ./src/main/webapp/app/features/features.routing.ts
 @ ./src/main/webapp/app/features/features.module.ts
 @ ./src/main/webapp/app/app.module.ts
 @ ./src/main/webapp/app/app.main.ts
 @ multi (webpack)-dev-server/client?http://localhost:9070 webpack/hot/dev-server ./src/main/webapp/app/app.main

[deepu105]

@dancancro, unfortunately, we cannot do support here, you need to take it to stack overflow

[dancancro]

@deepu105 Thanks. I don't know if it's worded specifically enough for stack overflow, but I asked the question here. We'll see.

[xetys]

as I am watching a related discussion at angular directly, here is some update we should check: https://github.com/angular/angular/issues/16256#issuecomment-313251782

[qasimraza1979]

tried both of the solution from @dancancro but it did not helped.

getting the following error.

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./src/components/ionic-test/ionic-test.component.scss Module not found: Error: Can't resolve '../../node_modules/ionicons/fonts/ionicons.eot?v=2.0.1' in 'C:\My-Source\angular-component-library\src\components\ionic-test' @ ./~/css-loader!./~/sass-loader/lib/loader.js!./src/components/ionic-test/ionic-test.component.scss 6:3910072-3910137 6:3910160-3910225 @ ./src/components/ionic-test/ionic-test.component.scss @ ./src/components/ionic-test/ionic-test.component.ts @ ./src/index.ts

any help will be highly appreciated