如何使用 SASS 设计风格

Question

入门指南注释：

There are several ways to include the Kendo UI theme in your project. We recommend Webpack and its Sass loader, which allows the customization of the Kendo UI theme by using Sass variables.

Let’s do something simpler for now, though.

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

Answer 1

Angular CLI

如果您要开始一个新项目，我会推荐 Angular CLI 而不是 WebPack，因为 CLI 无论如何都在幕后使用 WebPack。要安装，请键入以下命令：

npm install -g angular-cli

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

要使用 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（甚至不适用于后代）。如果要在组件外部引用样式，请使用special selectors found in the Angular 2 documentation，例如:host-context(.myClass)或/deep/。

WebPack

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

npm install sass-loader --save-dev

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

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

可以在 sass-loader GitHub page.

上找到使用 sass-loader 插件的完整文档

Answer 2

可以在 themes documentation. The still applies -- you can see a working sample that uses the components in the ng2-dashboard app (scss, component, webpack.config).

中找到有关 Angular 2 个组件的 Kendo UI 样式的更详尽的指南。

如何使用 SASS 设计风格

How to style with SASS

kendo-ui-angular2

angular