Angular + Webpack - How to add global CSS styles to Angular with webpack
The below steps show how to quickly 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 Part 2 - Create Base Project Structure & Webpack Config.
Install LESS / CSS webpack loaders into your Angular project
Run the following command from the root folder of your Angular project 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 global LESS / CSS stylesheet for your Angular app
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 your Angular 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 Angular 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 LESS / CSS 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 {}
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.
- Follow me on Twitter at https://twitter.com/jason_watmore
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Other than coding...
I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some Angular Help?
Search fiverr to find help quickly from experienced Angular developers.
Support my work
