theme and VS JavaScriptServices

3 posts, 1 answers
  1. Scott Waye
    Scott Waye avatar
    153 posts
    Member since:
    Nov 2009

    Posted 28 Aug 2017 Link to this post


    When using the theme scss file with Angular 2 and the JavaScriptServices SPA templates in Visual Studio, how do you get the scss to be handled?  I've read

    but I think there is a step missing when using JavaScriptServices as there is no loader defined for scss files.Is there some additional npm install required?
  2. Answer
    Dimiter Topalov
    Dimiter Topalov avatar
    740 posts

    Posted 30 Aug 2017 Link to this post

    Hi Scott,

    A SCSS/SASS loader has to be configured in the bundling pipeline to handle the respective file types. We did not include any JavaScriptServices-specific steps for handling the scss loading, as this is a third-party solution that is not directly related to the Kendo UI for Angular suite.

    However we have mentioned the steps, required for handling the situation in the following section of our documentation:

    The following setup yielded the desired result on my end:

    // _Layout.cshtml
    <!DOCTYPE html>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>@ViewData["Title"] - WebApplicationBasic</title>
            <base href="/" />
            <link rel="stylesheet" href="~/dist/main.css" asp-append-version="true" />
            <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
            @RenderSection("scripts", required: false)

    // webpack.config.js

    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    module.exports = (env) => {
        const extractCSS = new ExtractTextPlugin('main.css');
        // Configuration in common to both client-side and server-side bundles
        const isDevBuild = !(env &&;
        const sharedConfig = {
            stats: { modules: false },
            context: __dirname,
            resolve: { extensions: [ '.js', '.ts' ] },
            output: {
                filename: '[name].js',
                publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
            module: {
                rules: [
                    { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                    { test: /\.html$/, use: 'html-loader?minimize=false' },
                    { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                    { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
                    { test : /\.scss$/,
                        // exclude: /node_modules/,
                        use: extractCSS.extract({
                            use: ['css-loader', 'sass-loader']
            plugins: [new CheckerPlugin(), extractCSS]

    // app.module.shared.ts
    import "./../styles.scss";

    Create the styles.scss file in the Angular project root folder (ClientApp) and import the Kendo UI styles:

    @import "~@progress/kendo-theme-default/scss/all";

    The following general steps need to be followed:

    - install a SCSS/SASS loader (for example extract-text-webpack-plugin)
    - configure Webpack to use this loader for processing SCSS files
    - include the generated CSS file in the application

    On a side note, we recommend using the Angular/CLI for project setup and bundling, as in such projects all of the discussed functionality comes out-of-the-box, as described in our Get Started guide:

    You can also use the precompiled kendo styles .css file directly in the application:

    I hope this helps.

    Dimiter Topalov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Scott Waye
    Scott Waye avatar
    153 posts
    Member since:
    Nov 2009

    Posted 30 Aug 2017 in reply to Dimiter Topalov Link to this post

    Thanks, that's great and worked here.  The sass-loader wasn't installed so an additional:

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

    was required.  The Angular project is only one of 6 in my solution, the other 5 being c# so I prefer to do everything in VS, but appreciate for pure Angular the CLI is easier.

Back to Top