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 回答