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.
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 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;
}
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 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
☞ Angular 8 (formerly Angular 2) - The Complete Guide
☞ Angular & NodeJS - The MEAN Stack Guide
☞ The Complete Node.js Developer Course (3rd Edition)
☞ 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