Блог

Это 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 { ... }
  

Ошибка связана с файлом .scss, который я объявляю с помощью массива styleUrls, если я удалю его, компонент заработает, с другой стороны, я получаю эту ошибку:

 /~/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 нет никакой ошибки, и это происходит только для моего пользовательского модуля, он отлично работает для всех других компонентов (которые не являются функциональными модулями)

Вам нужен загрузчик sass по этой ссылке: 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
    }