Menu
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.
|- 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
@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%;
}
import {Component} from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './app-header.component.html',
styleUrls: ['./app-header.component.scss']
})
export class AppHeaderComponent {}
@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;
}
<!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>
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:
In angular-cli.json, app.styles: ["app/**/*.scss"]. It says cannot resolve path when being re-built.
In component file, styleUrls: [require('./app-header.component.scss')]. Throws console error "Uncaught Error: Cannot find module '.' at webpackMissingModule (main.bundle.js:1152) []"
In component file, import componentStyles from './app-header.component.scss' and then styles: [componentStyles]. Throws "Cannot find module './app-header.component.scss'." when building
I'm surprised this is so complicated, I must be missing something stupid.
845
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';
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
