앵귤러 템플리트에 sass 통합 visual tudio

Question

내 프로젝트의 경우 visual studio (https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack)에 angular2 템플릿 설치를 사용하고 있습니다. 나는 SASS를 intergrate하지만 예외 "을 던졌습니다. 노드 모듈에 대한 호출이 오류와 함께 실패했습니다 : 오류로 인해 사전 렌더링 실패 : 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"] } 
     ] 
    } 
}; 

나는 며칠 전 같은 문제에 직면 한

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

Answer 1

home.component.ts. yoman generator를 사용하여 .net core 앱을 다시 생성하여이 문제를 해결할 수있었습니다. 그것은 템플릿 팩과 동일한 템플릿을 가지고 있지만 더 새로운 패키지를 가지고 있습니다.

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

은 그 때 나는 모든 종속성

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

편집 webpack.config 모듈 로더 구성 요소에

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

추가하는 SCS 파일

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

}) 

만든 counter.component.scss를 설치

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

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