How to add a global LESS / CSS stylesheet to Angular application using Webpack

How to add a global LESS / CSS stylesheet to Angular application using Webpack

In this post, you'll learn steps show how to add a global LESS / CSS stylesheet to your Angular application using Webpack

Originally published at https://jasonwatmore.com

The below steps show how to add a global LESS / CSS stylesheet to your Angular application using Webpack. To find out how to setup an Angular app with Webpack see Angular 7 Tutorial - Create Base Project Structure & Webpack Config.

Install webpack loaders

Run the following command to install the npm packages required to convert LESS styles into CSS, then load the CSS styles and inject them into the DOM.

npm i --save-dev css-loader less less-loader style-loader

Create a global LESS / CSS stylesheet

Create a LESS stylesheet named app.less alongside your root Angular app component (/src/app/app.component.ts) with some simple styles for testing, for example:

body {

    background-color: #1abc9c;

}

Add module rules to webpack config

Update your webpack.config with the following module rules so webpack knows how to process *.less files.

{

    test: /.less$/,

    use: [

        { loader: 'style-loader' },

        { loader: 'css-loader' },

        { loader: 'less-loader' }

    ]

}

This is the complete webpack config file from the above example app after the style loaders have been added:

const HtmlWebpackPlugin = require('html-webpack-plugin');

 

module.exports = {

    entry: './src/main.ts',

    resolve: {

        extensions: ['.ts', '.js']

    },

    module: {

        rules: [

            {

                test: /.ts$/,

                use: ['ts-loader', 'angular2-template-loader']

            },

            {

                test: /.(html|css)$/,

                use: 'raw-loader'

            },

            {

                test: /.less$/,

                use: [

                    { loader: 'style-loader' },

                    { loader: 'css-loader' },

                    { loader: 'less-loader' }

                ]

            }

        ]

    },

    plugins: [

        new HtmlWebpackPlugin({ template: './src/index.html' })

    ],

    devServer: {

        historyApiFallback: true

    }

}

Import global stylesheet into Angular app component

Import the app.less global stylesheet into your root Angular app component (/src/app/app.component.ts) with the following line.

import './app.less';

This is the complete app.component.ts file from the above example app after the global stylesheet has been imported:

import { Component } from '@angular/core';

 

import './app.less';

 

@Component({ selector: 'app', templateUrl: 'app.component.html' })

export class AppComponent {}

Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

Angular 8 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

The Complete Node.js Developer Course (3rd Edition)

The Web Developer Bootcamp

Best 50 Angular Interview Questions for Frontend Developers in 2019

How to build a CRUD Web App with Angular 8.0

React vs Angular: An In-depth Comparison

React vs Angular vs Vue.js by Example

angular webpack css web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.

Corona Virus Pandemic has brought the world to a standstill. Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...