angular - 如何使用 SASS 进行样式设置

Question

入门指南说明：

有几种方法可以在您的项目中包含 Kendo UI 主题。我们推荐使用 Webpack 及其 Sass 加载程序，它允许使用 Sass 变量自定义 Kendo UI 主题。

不过，现在让我们做一些更简单的事情。

那么我们如何用 Webpack 和 Sass 做更复杂的版本呢？

Answer 1

角 CLI

如果你正在开始一个新项目，我会推荐 Angular CLI over WebPack，因为 CLI 在后台使用 WebPack。要安装，请键入以下命令：

npm install -g angular-cli

Angular CLI 为您提供了许多帮助命令来生成新组件等。有关命令的完整列表，请参阅GitHub 文档。

要使用 SASS 创建新项目，请在终端/命令提示符中使用以下命令：

ng new myProjectName --style=sass

然后，您只需从组件中引用 scss 文件，而不是 css 文件。CLI 将为您处理样式表的编译。

@Component({
    selector: 'my-custom-component',
    templateUrl: './my-custom.component.html',
    styleUrls: ['./my-custom.component.scss'], // Angular CLI knows this is a sass file and will preprocess it appropriately
})
export class MyCustomComponent {

}

请记住，您的样式表是有范围的，因此您可以使用选择器编写样式规则，div它只适用于该组件内的 div（甚至不适用于后代）。如果您想引用组件外部的样式，请使用Angular 2 文档中的特殊选择器，例如:host-context(.myClass)或/deep/。

---

网页包

如果您希望在没有 Angular CLI 的情况下使用 WebPack，则需要安装该sass-loader包：

npm install sass-loader --save-dev

然后，您需要在 webpack.config 中配置插件。将以下内容添加到配置的 module.loaders 部分：

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
}

使用 sass-loader 插件的完整文档可以在sass-loader GitHub 页面上找到。

Answer 2

可以在主题文档中找到有关为 Angular 2 组件设置 Kendo UI 样式的更详细指南。Maloric的一般建议仍然适用——您可以看到一个使用ng2-dashboard 应用程序（scss、component、webpack.config）中的组件的工作示例。