Angular-cli: [Beta.30] Can't work with scss file

[PoiScript]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Linux openSUSE Tumbleweed

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

__ _ _ __ __ _ _ _ | | __ _ _ __ ___ | |(_)
/ _|| '_ \ / _ || | | || | / _` || '__|_____ / __|| || |
| (_| || | | || (_| || |_| || || (_| || | |_____|| (__ | || |
__,_||_| |_| __, | __,_||_| __,_||_| ___||_||_|
|___/
@angular/cli: 1.0.0-beta.30
node: 6.9.1
os: linux x64
@angular/cli: 1.0.0-beta.30
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/flex-layout: 2.0.0-beta.4
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/platform-server: 2.4.6
@angular/router: 3.4.6
@angular/compiler-cli: 2.4.6

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

I only added "theme.scss" to angular-cli.json, like this:

      "styles": [
        "theme.scss",
        "styles.css",
        "github-markdown.css"
      ]

The log given by the failure.

Normally this include a stack trace and some more information.

When I run ng serve , I got

10% building modules 8/10 modules 2 active ...jects/WebStorm/Solomon/src/theme.scss
Process finished with exit code 135 (interrupted by signal 7: SIGEMT)

Using ng build got the similar error

10% building modules 6/9 modules 3 active ...jects/WebStorm/Solomon/src/theme.scssfish: “ng build” terminated by signal SIGBUS (Misaligned address error)

Mention any other details that might be useful.

I'm trying to change the theme of material2.

---

Thanks! We'll be in touch soon.

[ruffiem]

You also have to inform angular-cli that you're using scss in the angular-cli.json, eg:

  "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    }

css will still work, it will just launch the sass compiler for scss/sass files.

[PoiScript]

@ruffiem thank you for replying, I've already tried that. But I got the same error.

[ruffiem]

Can you post your theme.scss ?

[PoiScript]

@ruffiem Ok, I copied it from https://material.angular.io/guide/theming

@import '~@angular/material/core/theming/all-theme';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include md-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: md-palette($md-indigo);
$candy-app-accent:  md-palette($md-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    md-palette($md-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

[ruffiem]

I confirm the issue but I don't think it's the cli.

ERROR in ./~/css-loader?{"sourceMap":false}!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module build failed: 
    $result: map_merge($result, (
            ^
      (50: #ffebee, ... "contrast-contrast": null) isn't a valid CSS value.
      in /usr/local/var/www/projects/access/node_modules/@angular/material/core/theming/_theming.scss (line 30, column 14)
 @ ./src/styles.scss 4:14-181

[PoiScript]

eh... I just deleted theme.scss and renamed style.css to style.scss to see if it works, but I got the same error this time. So I thinked it's the cli.

[ruffiem]

Hum. I tried to play with it a little and it turns out the error was my fault. You cannot use material's variable and functions without passing them to @include angular-material-theme($your-custom-theme); or the compiler breaks on the error above. It's not your case.

I can't reproduce the same error. Is the error still there when you comment the sample material code ?

[PoiScript]

Oh... I just created a new ng-cli project, installed material2, added theme.scss and eveything worked well. So it came out to be my personal problem...

I will close this issue, thank for your help in any way ! @ruffiem

[mksmtn]

I have the same issue, so it's not completely your personal one

[PoiScript]

@krabovm Oh... after I fixed my problem by using the lastest @angular/compiler-cli, everything works fine.
Maybe you should try to upgrade all of your @angular/~ packages to lastest and make sure their version number are same? Or just create a new project with ng new --style scss?

[mksmtn]

@PoiScript Yeah, thank you, it works now.

[iwannabebot]

For any one facing the same issue.

I faced this issue when I was trying to apply a pallete instead of color in my scss. I resolved this by using mat-color()

@mixin my-theme($theme) {
    // Extract whichever individual palettes you need from the theme.
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);

    .mat-tab-label-active{
        .mat-tab-icon {
            background-color: mat-color($primary);
        }
    }
}

[jeremiahadkins]

@iwannabebot How exactly did you get this to work? I'm attempting to access theme variables in my component scss files. I've had no luck.

[soraliu]

@iwannabebot thank you, it works

[Mulperi]

@jeremiahadkins use mat-color($variable) in your component sass-file.

[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._}