集成sass在角模板视觉tudio

我在我的项目中使用angular2模板安装在visual studio（https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack）。我想整合SASS，但它抛出异常“呼叫节点模块失败，出现错误：预渲染失败，因为错误：ReferenceError：窗口未定义”。集成sass在角模板视觉tudio

这是我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')] 
})

来源

2016-12-05 Truc

我前几天遇到了同样的问题。我能够通过使用yoman生成器重新生成.net核心应用程序来解决此问题。它与模板包具有相同的模板，但包含更新的包。

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'] },

增加SCSS文件组件

@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; 
}

来源

2016-12-23 10:17:45

集成sass在角模板视觉tudio

回答

相关问题