0

これは私の機能モジュールの 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 ファイルにはエラーがなく、これはカスタム モジュールでのみ発生し、他のすべてのコンポーネント (機能モジュールではない) で完全に機能します。

4

1 に答える 1

0

このリンクから 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
    }
于 2017-01-01T03:38:24.770 に答える