Question

入门指南说明：

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

现在让我们做一些简单的事情。

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

Answer 1

Angular CLI

如果您正在开始一个新项目，我建议通过WebPack使用Angular CLI，因为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中配置插件。将以下内容添加到config的module.loaders部分：

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

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

Answer 2

可以在themes documentation中找到关于Angular 2组件的Kendo UI样式的更精细指南。 general advice by Maloric仍然适用 - 您可以看到使用ng2-dashboard app（scss，component，webpack.config）中的组件的工作示例。

如何用SASS设计风格

2 个答案: