将sass集成到角度模板visual tudio中
我正在visual studio()中为我的项目使用angular2模板安装。我想集成SASS,但它引发异常“对节点模块的调用失败,错误:预渲染失败,原因是错误:ReferenceError:未定义窗口”” 这是我的将sass集成到角度模板visual tudio中,sass,webpack,angular-template,Sass,Webpack,Angular Template,我正在visual studio()中为我的项目使用angular2模板安装。我想集成SASS,但它引发异常“对节点模块的调用失败,错误:预渲染失败,原因是错误:ReferenceError:未定义窗口”” 这是我的webpack.config.js文件: var sharedConfig = { resolve: { extensions: [ '', '.js', '.ts' ] }, output: { filename: '[name].js',
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')]
})
几天前我也遇到过同样的问题。 我可以通过使用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;
}