React - How to add Global CSS / LESS styles to React with webpack
The below steps show how to quickly add a global LESS / CSS stylesheet to your React application using Webpack.
Install LESS / CSS webpack loaders into your React project
Run the following command from the root folder of your React 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 React app
Create a LESS stylesheet named styles.less (the name can be anything you like) in the /src folder of your React project with some simple styles for testing, for example:
body {
background-color: #1abc9c;
}
Add module rules to your React webpack config
Update your React 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' }
]
}
Here's a complete example React webpack config file with the LESS / CSS rules included.
var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader'
},
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
]
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'@': path.resolve(__dirname, 'src/'),
}
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html'
})],
devServer: {
historyApiFallback: true
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:4000'
})
}
}
Import global LESS / CSS stylesheet into main React entry file
Import the styles.less global stylesheet into your main React entry file (e.g. /src/index.js or /src/index.jsx) with the following line.
import './styles.less';
Here's an example main React entry file that includes the imported global styles.
import React from 'react';
import { render } from 'react-dom';
import { App } from './App';
import './styles.less';
render(
<App />,
document.getElementById('app')
);
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 React Help?
Search fiverr to find help quickly from experienced React developers.
Support my work
