SASS / CSS support, what am I missing?

[vapits]

Hi there again,

sorry for the multiple issues, I do understand that this is a pre-alpha version still though is awesome to use.

Now, as I read in the README there is already support for CSS preprocessors.
So I installed node-sass as said and rename the files (one file it is for one component) to .sass.
That was all.
No .css file is produced. I kept the .css file in the styleUrls option but also tried the .sass that of course cannot be imported.

Now if I go back to .css the file is created and included but I see (in the Network tab) that is included as XHR and therefore browser is not recognise it as a Stylesheet and therefore again it's not rendering the UI correctly.

Any ideas?

[vapits]

UPDATE:
I manage to find compiled CSS by adding enableProdMode() to the project.

Still though the css file is included to the project as an XHR request/respond and not as a stylesheet, so still no styling in my app :/

[anode7]

styles will be applied only to child elements .
If you want to apply a style to the body tag , for example, you must load your style directly from index.html :
<link rel="stylesheet" href="style.css">
and your style.sass :
$font-stack: Helvetica, sans-serif; $primary-color: #f00; body {font: 100% $font-stack;color: $primary-color;}
get in your /dist folder a' style.css' with this:
body { font: 100% Helvetica, sans-serif; color: #f00; }

...and your text will be very red

[vapits]

@anode7 thx but actually I can't make style work in none of the elements, not body tag etc, I do realise that i need a custom style file there.
I get the style loaded as some.component.css let's say loaded though a XHR request so it;s not rendered as a stylesheet file.

So if I'm trying to style one of the elements of my component html file I simply can't.

[filipesilva]

@jkuri can you have a look?

[jkuri]

Hi @vapits, I tried this with the 0.0.33 and the latest master; both working properly. Do you maybe renaming files to .sass in dist/ folder? Also, can you provide your ng -v output here? This should be working properly.

[vapits]

Hi @jkuri the compilation from sass to css is working.
I manage to make it work by putting Angular to production mode by including enableProdMode(); in my code.

But: CSS file from dist is called with an XHR request though and therefore is not rendered as a stylesheet, so no styling for my app. If I add id manually in the headers it works but this can not be the solution as I'll have many css files.

Also my ng -v gives me:

angular-cli: 0.0.33
node: 5.10.1
os: darwin x64

[jkuri]

@vapits so the .sass files are compiled now? Why you are not using styleUrls: [] in your components?

[vapits]

@jkuri Yes it works the compiling only).
I use styleUrls.

@Component({
  selector: 'left-bar',
  templateUrl: 'app/left-bar/left-bar.component.html',
  styleUrls: ['app/left-bar/left-bar.component.css']
})

It loads the css as XHR not CSS.

So for that reason browser is not rendering the CSS.

[jkuri]

Yeah, that's fine. It should work. If the issue still persist please share your full code and I can take a look.

[vapits]

It doesn't. Is it correct to load stylesheet as an XHR? And if so how the browser will tell that this is a stylesheet?

My code is an example with angular-cli.

Here are the files:

app.ts

import {bootstrap} from 'angular2/platform/browser';
import {WebAppApp} from './app/web-app';

bootstrap(WebAppApp, []);

web-app.ts

import {Component, enableProdMode} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {LeftBarComponent} from './left-bar/index';

/** 
 * Enable Production mode of Angular in order
 * to work correctly with styling and systemJs
*/
enableProdMode();

@Component({
  selector: 'web-app-app',
  providers: [ROUTER_PROVIDERS],
  templateUrl: 'app/web-app.html',
  directives: [ROUTER_DIRECTIVES, LeftBarComponent],
  pipes: []
})
@RouteConfig([
])
export class WebAppApp {
  defaultMeaning: number = 42;

  meaningOfLife(meaning?: number) {
    return `The meaning of life is ${meaning || this.defaultMeaning}`;
  }
}

web-app.html

<p>
  web-app Works!
</p>

<router-outlet></router-outlet>

<left-bar></left-bar>

left-bar.component.ts

import {Component, OnInit} from 'angular2/core';

@Component({
  selector: 'left-bar',
  templateUrl: 'app/left-bar/left-bar.component.html',
  styleUrls: ['app/left-bar/left-bar.component.css']
})
export class LeftBarComponent implements OnInit {

  ngOnInit() {
  }

}

[jkuri]

Yes, it is correct. Just set some styles to left-bar component.
For example:

// left-bar.component.ts
import {Component, OnInit} from 'angular2/core';

@Component({
  selector: 'left-bar',
  host: { 'class': 'left-bar' },
  templateUrl: 'app/left-bar/left-bar.component.html',
  styleUrls: ['app/left-bar/left-bar.component.css']
})
export class LeftBarComponent implements OnInit {

  ngOnInit() {
  }

}

// left-bar.component.sass
.left-bar
  display: block;
  width: 500px;
  height: 500px;
  background: #000;

Please report if it works for you.

[vapits]

@jkuri of course i have already some style there man :P It doesn't work.