I am trying to use .less files with a minimalist React app (created with create-react-app). I've added less
and less-loader
to my package.json as well as a module rule in my webpack.config.js file. The class reference is not being added to the HTML element however (should have class="customColor").
<p>Hello world in a custom color.</p>
I'm wondering what I'm doing wrong.
import React from 'react';
import './App.css';
import styles from './custom.less';
function App() {
return (
<div className="App">
<header className="App-header">
<p className={styles.customColor}>
Hello world in a custom color.
</p>
</header>
</div>
);
}
export default App;
@custom-color: red;
.customColor {
color: @custom-color;
}
{
"name": "sample",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"less": "^3.10.3",
"less-loader": "^5.0.0"
}
}
module.exports = {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
}],
}],
}
If you're using CRA, I would suggest going without ejecting.
First install less
, less-watch-compiler
and concurrently
:
npm install less less-watch-compiler concurrently --save-dev
Then in your root directory create less-watcher.config.json
and set the configuration:
{
"watchFolder": "src/",
"outputFolder": "src/",
"runOnce": false,
"enableJs": true
}
Rename App.css
to App.less
Replace start script
in package.json
with the following:
"scripts": {
"start": "concurrently --kill-others \"less-watch-compiler --config less-watcher.config.json\" \"react-scripts start\"",
"build": "react-scripts build",
....
}
and run the application. Enjoy :)
to use less files in a react project created with create-react-app follow these steps:
npm run eject
npm i less less-loader
look at the return value of exported function(that's the main config)
find where last style-loader added which is sass-loader
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
and add less-loader under sass-loader like this:
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
{
test: /\.less$/,
use: getStyleLoaders(
{
modules: true,
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
importLoaders option inside less-loader should be 3.
two loaders from getStyleLoaders + our less-loader.
The option importLoaders allows you to configure how many loaders before css-loader should be applied to @imported resources.
// index.less file
.header {
background-color: skyblue;
}
if you want to use stylesheet file like this:
import styles from './index.less';
<div className={styles.header}></div>
you should set modules: true
but if you want to use it like below:
import './index.less';
<div className="header"></div>
you should set modules: false
CRA (Create React App) by default supports only SASS
and CSS
if you want to use LESS
you need to do npm run eject
first and then modify webpack
configs.
However there is a way to do that w/o ejecting tho I have to say I personally prefer ejecting. You can find instructions here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With