CODEWITHSUNDEEP
javascriptsassangular-cli
coblr
coblr

Reputation: 3038

Why is angular cli not including my component scss?

I'm using:

I have a new Angular CLI project that does not load the component styles despite them being shown in the main.bundle.js file and no path errors being thrown (anymore).

The angular-cli.json file has defaults.styleExt: "scss" and apps.styles: ["styles.scss","path/to/bootstrap.css"]. defaults.inline for style and template are both false.

Global and Bootstrap styles are being loaded, but not any from components.

Directory Structure

|- src
  |- index.html
  |- styles.scss
  |- scss
    |- _colors.scss
    |- _modals.scss
    |- _overrides.scss
    |- _utils.scss
  |- app
    |- components
      |- app-header
        |- app-header.component.ts
        |- app-header.component.html
        |- app-header.component.scss
    |- pages
    |- app-routing.module.ts
    |- app.component.ts
    |- app.module.ts

styles.scss

@import './scss/_colors';
@import './scss/_overrides';
@import './scss/_utils';
@import './scss/_modals';

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Roboto', 'Helvetica', sans-serif;
}

app-root {
  display: table;
  width: 100%;
  height: 100%;
}

app-header.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './app-header.component.html',
  styleUrls: ['./app-header.component.scss']
})
export class AppHeaderComponent {}

app-header.component.scss

@import '../../../../scss/_colors';

:host {
  display: table-row;
  height: 1px;
  background: #FFF;
}

.header-stripe {
  width: 100%;
  height: 3px;
  background: $AMARANTH;
}

.header-content {
  padding: 5px 20px;
  width: 100%;
  position: relative;
  border-bottom: solid 1px $ALTO;
}

index.html

<!doctype html>
<html>
  <head>
    <base href="./">
    <title>Test CLI App</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" />
  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

Some Context...

I started this project using the Angular2 Heroes tutorial. I was having trouble getting testing and other things to 'just work'. During my research, I decided to try out using Angular CLI since it's supposed to include a functioning test bed and hopefully some other benefits.

Initially, I had lots of JS errors regarding my template and style paths, and after some digging and digging, I was able to get rid of the errors. My webpack build is now supposedly "valid".

In my angular-cli.json file, I updated the defaults.styleExt to be scss, and I was able to get global styles included by adding my styles.scss file to apps.styles. My core layout styles and Bootstrap styles are now being applied to the app.

My issue is that for some reason, my component styles are not being loaded. As I said, they appear in the main.bundle.js after I run ng build, and I've confirmed that they are in the main.bundle.js that is being loaded in chrome when I run ng serve (not sure if those files are the same since I can run ng serve without having run ng build first). It also looks as if the variables are being correctly parsed by node-sass.

Things that didn't work:

I'm surprised this is so complicated, I must be missing something stupid.

Upvotes: 8

Views: 5797

Answers (4)

Damon
Damon

Reputation: 4484

Late to the party, but came across the same thing. Throwing this out there as another option for someone who comes across this thread.

Everything was rendering, styles were getting written as mentioned above, but nothing was actually showing.

Found this article on Shadow DOM Strategies that solved my problem.

Specifically setting encapsulation: ViewEncapsulation.None made styles show correctly for the given component.

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

Upvotes: 4

coblr
coblr

Reputation: 3038

It seems that in my case, the only way to fix was to actually use the Angular CLI to generate all of my components, services and pipes and basically rebuild everything that way.

I first generated a new project, then updated my angular-cli.json file to use SCSS. From there, I manually did ng g <whatever> to rebuild everything (about 20 components and 3 services). I'm now copying and pasting all the custom methods and fun stuff one by one and verifying things are working after each step.

This is kind of a pain because the new files all seem to be otherwise identical but the CLI version of my app was not happy when I just dropped in components and things from the non-CLI generated app. Maybe it was the directory structure? Maybe I just bulldozed something? I don't know.

I hope someone in the future is able to drop a reason as to why this may have happened.

Upvotes: 0

Frederik Strelczuk
Frederik Strelczuk

Reputation: 1

After updating my angular app from 7 to 8 I experienced the same behaviour. After a few hours I did find the cause in my case: I'm using BrowserModule.withServerTransition({appId: APP_ID}) and my APP_ID was structured like xx.xxx.xxxxx. After removing all the dots from the APP_ID it all worked again as expected.

Upvotes: 0

Xandrios93
Xandrios93

Reputation: 2295

Did you try to add "app/**/*.scss" to apps.styles?

I use something like this in my gruntfile to concat all less files to one

Upvotes: 0

Related Questions