Angular-cli: .scss not working

[Kim-Andersen]

OSX El Capitan
angular-cli: 1.0.0-beta.6
node: 5.9.0
os: darwin x64
App created using angular-cli.

I can't get .scss files working. I installed node-sass and renamed .css files to .scss, and get a 404 on the missing .css file.

What am I missing?

[choucry13]

if you want to use .scss to css in your code, lauch the commande :
node-sass -w directoryOfFile.scss -o directoryOfFile.css
-w is a watcher when you edit you file scss.
In your component, you write just the css file.
That's clear for you or do you want a example ?

[Kim-Andersen]

I was under the impression, hence the angular-cli documentation, that all you have to do is install node-sass and rename to .scss. That is not the case then, I suppose.

However, your pseudo code makes sense, thanks.

[Kim-Andersen]

The documentation says: "To use one just install for example npm install node-sass and rename .css files in your project to .scss or .sass. They will be compiled automatically."

This is why I thought it should work out of the box.

[ghidoz]

Did you only renamed .css files to .scss or you also renamed file names in your components?
Because you should have app.component.scss, but the component itself should reference app.component.css

[briananderson1222]

^_^ using what @ghidoz said has been working fine for me for over 2 months now :)

[KrisTemmerman]

it doesn't work for me either, changed the filename to xxx.component.scss. output:
`GET http://localhost:4200/app/xxx.component.css 404 (Not Found)``

[ghidoz]

If you want, I set up a starter project based on Angular CLI, with some more feature: https://github.com/ghidoz/angular2-starter
You can clone it or you can just have a look at how I set up the CSS configuration, allowing also includes. Refer to this commit for details: https://github.com/ghidoz/angular2-starter/commit/1e6a8cdea6c7b3d8d3d119482efc210d6e19620a

[renevall]

nvm just changing name to scss did the trick in the end.

[renevall]

Ok something is weird, when I update the css file, it does compile and output file to dist folder. But ngserve seems to be getting an empty css file, which I interprets as it is not using the dist folder.

[MrHus]

It is not working for me as well, my environment is:

angular-cli: 0.0.39
node: 5.3.0
os: darwin x64

I installed "node-sass": "^3.8.0".

I've got the following cheese component:

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

@Component({
  moduleId: module.id,
  selector: 'cheese-app',
  templateUrl: 'cheese.component.html',
  styleUrls: ['cheese.component.css'] // According to @ghidoz this is correct right?
})
export class CheeseAppComponent {
  title = 'cheese works!';
}

And the following scss file called cheese.component.scss:

h1 {
  color:red;
}

[zackarychapple]

@MrHus you are on a very old version of the CLI that is pre ng-conf. Upgrade your environment and retest please.

[MrHus]

I've upgraded to 1.0.0-beta.8 and it works now.

[vadym-kukhtin]

@filipesilva Hi! I still have this problem on beta19.
Structure:

app/src/editor/editor.component.ts
app/src/editor/editor.component.scss
app/src/editor/editor.component.spec.ts

In Component:

@Component({
    selector: 'editor',
    styleUrls: ['editor.component.css'],
    template: `
        <div class="content-area--wrapper">
            <div class="content-area--body" [dragula]='"moveBlocks"'>
                    <core-widget-component class="block--wrapper" [attr.data-id]="el.blockId"
                        *ngFor="let el of page.page_content.elements" 
                        [widget]="el"
                        [parent]="'topLevelComponent'">
                    </core-widget-component>
            </div>
        </div>
`
})

What is the problem here?

[filipesilva]

@vadym-kukhtin use a relative path ./editor.component.css.

[vadym-kukhtin]

@filipesilva The same for ./editor.component.scss.
If I am migrating ng2 components that were written not using ng-cli - it doesn't work, fot those - created by ng-cli - everything works

[anrtero]

try setting default style extension with command ng set defaults.styleExt scss

[demiro]

For me, when I use cli to generate components the syntax is all good... references it via the scss (styleUrls)...
but ng serve picks up only app.component.scss and not any other components...

[targunp]

here is a fix, put this in your .angular-cli.json:

"stylePreprocessorOptions": { "includePaths": [ "../node_modules" ] },

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}