錯誤，關於styleUrls數組聲明的SCSS文件

Question

這是我的功能模塊的NgModule：

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

export class CustomCardModule {} 

組件內部：

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 { ... } 

錯誤是關於我使用styleUrls數組聲明的.scss文件，如果我將其刪除組件工程，另一方面我得到此錯誤：

/~/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 

但.scss文件沒有任何錯誤，並且這僅發生在我的自定義模塊中，它對所有其他組件（非功能模塊）都是完美的。

Answer 1

您需要sass-loader，鏈接： 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 
    }