react如何添加less環(huán)境配置
更新時間：2022年05月28日 10:54:48 作者：書池
這篇文章主要介紹了react如何添加less環(huán)境配置，本文給大家分享遇到問題及解決方案，結合示例代碼圖文給大家介紹的非常詳細，需要的朋友參考下吧
1.安裝less
npm install less-loader less --save-dev
2.找到node_modules文件夾里react-scripts/config/webpack.config.js
在這個下面添加less相關配置
const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/;
3.然后往下翻代碼到下圖
在這段代碼下面加
{
test: lessRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},4.在src目錄下創(chuàng)建一個less文件，里面寫樣式
5.引入
6.如果啟動報錯如下，就說明less-loader版本太高
7.解決方案，修改less-loader版本，大概6.0.0就好了
npm install less-loader@6.0.0
到此這篇關于react如何添加less環(huán)境配置的文章就介紹到這了,更多相關react添加less環(huán)境配置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了React項目中className運用及問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了react ant Design手動設置表單的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了react組件基本用法,結合實例形式分析了react組件傳值、生命周期、受控組件和非受控組件等相關操作技巧,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了react中context傳值和生命周期,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了React函數組件和類組件的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
隨著React應用日益復雜,開發(fā)者需要借助模塊打包工具來管理項目依賴、轉換代碼和優(yōu)化性能,Webpack是一款功能強大的模塊打包器,它可以將React項目中的JavaScript、CSS、圖片等資源打包成瀏覽器友好的文件,本文將全面介紹如何使用Webpack打包React項目2025-03-03
React替換傳統(tǒng)拷貝方法的Immutable使用
Immutable.js出自Facebook，是最流行的不可變數據結構的實現(xiàn)之一。它實現(xiàn)了完全的持久化數據結構，使用結構共享。所有的更新操作都會返回新的值，但是在內部結構是共享的，來減少內存占用2023-02-02
這篇文章主要介紹了React之PureComponent的使用作用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
詳解在React中跨組件分發(fā)狀態(tài)的三種方法
這篇文章主要介紹了詳解在React中跨組件分發(fā)狀態(tài)的三種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹react實現(xiàn)路由攔截的,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02