How to add global CSS styles to Angular with webpack

How to add global CSS styles to Angular with webpack

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

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

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

angular angularjs CSS webpack

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

How to add global LESS / CSS styles to Angular with webpack

The angular allow us to add the component specific styles in individual components, which will override the global styles.In this article, we will show you how to add a global LESS / CSS stylesheet to your Angular application with Webpack.

This is how angular-cli/webpack delivers your CSS styles to the client

Have you ever wondered how is it possible to import CSS into JavaScript files? In this article I'll show you how Webpack does it by transforming your CSS styles into JavaScript.

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

How to Add global CSS styles to Angular with Webpack

The below steps show how to add a global LESS / CSS stylesheet to your Angular application using Webpack.

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")**...