CODEWITHSUNDEEP
angularkendo-ui-angular2
Chris Curnow
Chris Curnow

Reputation: 653

How to style with SASS

The Getting Started guide notes:

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.

So how do we do the more complex version with Webpack and Sass?

Upvotes: 1

Views: 962

Answers (2)

Maloric
Maloric

Reputation: 5625

Angular CLI

If you're starting a new project, I would recommend the Angular CLI over WebPack, as the CLI uses WebPack behind the scenes anyway. To install, type the following command:

npm install -g angular-cli

The Angular CLI gives you a lot of helper commands to generate new components etc. For a comprehensive list of commands, see the GitHub documentation.

To create a new project using SASS, use the following command in your terminal / command prompt:

ng new myProjectName --style=sass

You then simply reference the scss file from your component instead of a css file. The CLI will handle compilation of the stylesheet for you.

@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 {

}

Remember that your stylesheets are scoped, so you can write a style rule with the selector div and it will only apply to divs inside this component (not even in descendants). If you want to reference styles outside the component, use the special selectors found in the Angular 2 documentation, such as :host-context(.myClass) or /deep/.

WebPack

If you'd prefer to use WebPack without the Angular CLI, you'll need to install the sass-loader package:

npm install sass-loader --save-dev

You then need to configure the plugin inside of your webpack.config. Add the following to the module.loaders section of the config:

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

Full documentation for using the sass-loader plugin can be found on the sass-loader GitHub page.

Upvotes: 2

Alex Gyoshev
Alex Gyoshev

Reputation: 11977

A more elaborate guide on styling the Kendo UI for Angular 2 components can be found in the themes documentation. The general advice by Maloric still applies -- you can see a working sample that uses the components in the ng2-dashboard app (scss, component, webpack.config).

Upvotes: 1

Related Questions