javascript - Why is angular cli not including my component scss?

I'm using:

Angular v2.3.1
Angular CLI v1.0.0-beta.24
Node v6.9.2
Node-sass v4.1.1

I have a new Angular CLI project that does not load the ponent 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 ponents.

Directory Structure

|- src
  |- index.html
  |- styles.scss
  |- scss
    |- _colors.scss
    |- _modals.scss
    |- _overrides.scss
    |- _utils.scss
  |- app
    |- ponents
      |- app-header
        |- app-headerponent.ts
        |- app-headerponent.html
        |- app-headerponent.scss
    |- pages
    |- app-routing.module.ts
    |- appponent.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-headerponent.ts

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

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

app-headerponent.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=":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 ponent 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:

In angular-cli.json, app.styles: ["app/**/*.scss"]. It says cannot resolve path when being re-built.
In ponent file, styleUrls: [require('./app-headerponent.scss')]. Throws console error "Uncaught Error: Cannot find module '.' at webpackMissingModule (main.bundle.js:1152) []"
In ponent file, import ponentStyles from './app-headerponent.scss' and then styles: [ponentStyles]. Throws "Cannot find module './app-headerponent.scss'." when building

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

I'm using:

Angular v2.3.1
Angular CLI v1.0.0-beta.24
Node v6.9.2
Node-sass v4.1.1

I have a new Angular CLI project that does not load the ponent 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 ponents.

Directory Structure

|- src
  |- index.html
  |- styles.scss
  |- scss
    |- _colors.scss
    |- _modals.scss
    |- _overrides.scss
    |- _utils.scss
  |- app
    |- ponents
      |- app-header
        |- app-header.ponent.ts
        |- app-header.ponent.html
        |- app-header.ponent.scss
    |- pages
    |- app-routing.module.ts
    |- app.ponent.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.ponent.ts

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

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

app-header.ponent.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./css?family=Roboto:100,300,400" />
  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

Some Context...

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".

Things that didn't work:

In angular-cli.json, app.styles: ["app/**/*.scss"]. It says cannot resolve path when being re-built.
In ponent file, styleUrls: [require('./app-header.ponent.scss')]. Throws console error "Uncaught Error: Cannot find module '.' at webpackMissingModule (main.bundle.js:1152) []"
In ponent file, import ponentStyles from './app-header.ponent.scss' and then styles: [ponentStyles]. Throws "Cannot find module './app-header.ponent.scss'." when building

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

Share Improve this question edited May 23, 2017 at 12:07 CommunityBot 11 silver badge asked Jan 4, 2017 at 18:33 coblr 3,0383 gold badges25 silver badges33 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 4

Late to the party, but came across the same thing. Throwing this out there as another option for someone who es 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 ponent.

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

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

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.

It seems that in my case, the only way to fix was to actually use the Angular CLI to generate all of my ponents, 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 ponents 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 ponents 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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why is angular cli not including my component scss? - Stack Overflow

Directory Structure

styles.scss

app-headerponent.ts

app-headerponent.scss

index.html

Some Context...

Directory Structure

styles.scss

app-header.ponent.ts

app-header.ponent.scss

index.html

Some Context...

4 Answers 4

与本文相关的文章

评论列表(0)