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

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.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16

Most upvoted comments

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);
        }
    }
}

+10

iwannabebot on Dec 28, 2017

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

Mulperi on Apr 23, 2018

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

mksmtn on Jun 10, 2017

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

ruffiem on Feb 10, 2017