在 Angular 模板 Visual Studio 中集成 sass答案

【问题标题】：Integrate sass in angular template visual tudio在 Angular 模板 Visual Studio 中集成 sass
【发布时间】：2017-04-19 09:36:03
【问题描述】：

我在 Visual Studio (https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack) 中为我的项目使用 angular2 模板安装。我想集成 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')]
})

【问题讨论】：

标签： sass webpack angular-template

【解决方案1】：

几天前我也遇到了同样的问题。我能够通过使用 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;
}

【讨论】：