Question

我一直在遵循这里的指南https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components，将scss文件合并为角度2组件的样式，但它不起作用。

如何使用webpack将scss文件合并到我的angular 2组件中？

这是主要组成部分：

import { Component } from '@angular/core';


@Component({
    selector: 'my-app',
    templateUrl: 'src/app/app.component.html',
    styleUrls: [ 'src/app/app.component.scss' ]
})
export class AppComponent {
    constructor() {}

    name: string = 'My Demo';
}

我知道这篇文章建议在我的webpack配置中使用raw-loader，但这不起作用

scss只是保留在没有预处理的情况下。

您可以在此处查看plnkr基本项目的详细信息：https://plnkr.co/edit/eG1POBcBL8kGpvrhh3yW?p=info

按照README说明进行构建和服务。

似乎没有关于在组件中包含scss文件的最新文档吗？

Answer 1

如果您想要一个开箱即用的SCSS新项目，请使用write a view test生成它并且您可以继续使用。比你自己实现sass要容易得多。

ng new sassy-project --style=scss

或：

QThread

Answer 2

你可以通过下一个方式做到：

现有package.json所在的项目文件夹中的命令行：

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

在webpack.common.js中，搜索“loaders：”并将此对象添加到loaders数组的末尾（不要忘记在前一个对象的末尾添加逗号）：

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

然后在你的组件中：

@Component({
  styleUrls: ['./filename.scss'],
})

如果您需要全局CSS支持，那么在顶级组件（可能是app.component.ts）上删除封装并包含SCSS：

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

Angular 2 Webpack 2 - Sass不在组件中工作

2 个答案: