Error from a feature module build in Angular 2, regarding the scss file declared in styleUrls array

Question

This is the NgModule of my feature module:

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        CustomCardComponent,
        StyledDirective
    ],
    exports: [CustomCardComponent]
})

export class CustomCardModule {}

Inside the component:

import {Component, OnInit, Input} from '@angular/core';
others imports

@Component({
    selector: 'my-custom-card',
    templateUrl: './custom-card.component.html',
    styleUrls: ['./custom-card.component.scss']
})

export class CustomCardComponent implements OnInit { ... }

The error is about the .scss file I'm declaring using styleUrls array, if I remove it the component works, on the other hand I get this error:

/~/css-loader?sourceMap!./~/postcss-loader!./~/sass-loader!./~/raw-loader!./~/postcss-loader!./~/sass-loader!./src/myModules/custom-card-fmodule/custom-card.component.scss
Module build failed: 
$cardWidth: 220px;
             ^
      Invalid CSS after "module.exports": expected "{", was '= ".panel-default >'
      in /Users/MyName/Development/Angular2/signup-app/src/myModules/custom-card-fmodule/custom-card.component.scss (line 1, column 15)
Error: 
$cardWidth: 220px;
             ^
      Invalid CSS after "module.exports": expected "{", was '= ".panel-default >'
      in /Users/MyName/Development/Angular2/signup-app/src/myModules/custom-card-fmodule/custom-card.component.scss (line 1, column 15)
    at options.error (/Users/MyName/Development/Angular2/signup-app/node_modules/node-sass/lib/index.js:292:26)
 @ ./src/myModules/custom-card-fmodule/custom-card.component.scss 4:14-339

but the .scss file doesn't have any error, and this happens only for my custom module, it works perfectly for all other components (that are not feature-modules)

score 0 · Answer 1 · answered Jan 01 '17 at 03:38

You need sass-loader, from this link: https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components

        Command line inside project folder where your existing package.json is:
            npm install node-sass sass-loader raw-loader --save-dev

    In webpack.common.js, search for "rules:" and add this object to the end of the rules array (don't forget to add a comma to the end of the previous object):


    {
      test: /\.scss$/,
      exclude: /node_modules/,
      loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
    }

Error from a feature module build in Angular 2, regarding the scss file declared in styleUrls array

1 Answers1