This is a migrated thread and some comments may be shown as answers.

theme and VS JavaScriptServices

2 Answers 92 Views

Integration with other JS libraries

This is a migrated thread and some comments may be shown as answers.

2 Answers, 1 is accepted

Accepted

answered on 30 Aug 2017, 12:59 PM

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:

http://www.telerik.com/kendo-angular-ui/components/framework/universal/#toc-adding-the-styles

The following setup yielded the desired result on my end:

// _Layout.cshtml

<!DOCTYPE html>

<html>

<head>

<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" />

</head>

<body>

@RenderBody()

@RenderSection("scripts", required: false)

</body>

</html>

// 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 && env.prod);

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:

http://www.telerik.com/kendo-angular-ui/getting-started/

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

http://www.telerik.com/kendo-angular-ui/components/styling/#toc-using-precompiled-css

I hope this helps.

Regards,
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

jQuery

Angular

React

Vue

theme and VS JavaScriptServices

2 Answers, 1 is accepted