角型テンプレートにサスペンドを組み込む

Question

私のプロジェクトではvisual studio（https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack）にangle2 template installを使用しています。私はSASSを混在させたいが、例外 "を呼び出すノードモジュールへの呼び出しはエラーで失敗した：エラーのためにレンダリングに失敗した：ReferenceError：ウィンドウが定義されていない"。

この私のwebpack.config.jsファイル：

var sharedConfig = { 
    resolve: { extensions: [ '', '.js', '.ts' ] }, 
    output: { 
     filename: '[name].js', 
     publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
    }, 
    module: { 
     loaders: [ 
      { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }, 
      { test: /\.html$/, loader: 'raw' }, 
      { test: /\.css$/, loader: 'to-string!css' }, 
      { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }, 
      { test: /\.scss$/, loaders: ["style-loader", "css-loader", "sass-loader"] } 
     ] 
    } 
}; 

とhome.component.ts

@Component({ 
    selector: 'home', 
    template: require('./home.component.html'), 
    styles: [require('./home.component.scss')] 
}) 

Answer 1

私は数日前に同じ問題に直面してきました。 私はyoman generatorを使って.net core appを再生成することでこれを解決できました。それはテンプレートパックと同じテンプレートを持ちますが、新しいパッケージがあります。

npm install -g yo generator-aspnetcore-spa 
yo aspnetcore-spa 

それから私は

counter.component.scssを作成し

@Component({ 
    selector: 'counter', 
    templateUrl: './counter.component.html', 
    styleUrls: ['./counter.component.scss'] 

}) 

コンポーネントにすべての依存性

npm install node-sass sass-loader raw-loader --save 

編集webpack.configモジュールローダー

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

を追加しましたSCSSファイルをインストール

$font-stack: Helvetica, sans-serif; 
$primary-color: #ff0000; 

p { 
    font: 100% $font-stack; 
    color: $primary-color; 
}