React中引入less、less-loader問題
更新時間：2024年01月24日 10:05:35 作者：dayTimeAffect
這篇文章主要介紹了React中引入less、less-loader問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
前言
官方的 create-react-app創(chuàng)建的項目默認是不支持 less 的，但是又寫不慣其他的預處理語言
方法
第一步
//安裝 less與less-loader yarn add less less-loader --save-dev
第二步
//彈出默認配置，create-react-app創(chuàng)建的項目默認是沒有webpack.config.js的 yarn eject
第三步
// 在webpack.config.js文件中，仿sass的引入
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
}
注意
TypeError: this.getOptions is not a function 錯誤
這是由于less-loader版本過高導致，使用7.3.0版本即可。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了react如何獲取URL中參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
解析React中useMemo與useCallback的區(qū)別
這篇文章主要介紹了React中useMemo與useCallback的區(qū)別,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了使用Ant Design Anchor組件的一個坑及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
useEffect?返回函數(shù)執(zhí)行過程源碼解析
這篇文章主要為大家介紹了useEffect?返回函數(shù)執(zhí)行過程源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
React中實現(xiàn)keepalive組件緩存效果的方法詳解
由于react官方并沒有提供緩存組件相關的api（類似vue中的keepalive），在某些場景，會使得頁面交互性變的很差。所以本文為大家介紹了React中實現(xiàn)keepalive組件緩存效果的方法，希望對大家有所幫助2023-01-01
本篇文章主要介紹了ReactNative踩坑之配置調試端口的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
react?路由權限動態(tài)菜單方案配置react-router-auth-plus
這篇文章主要為大家介紹了react路由權限動態(tài)菜單方案react-router-auth-plus傻瓜式配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
Refs是一個 獲取 DOM節(jié)點或React元素實例的工具,在React中Refs 提供了一種方式,允許用戶訪問DOM 節(jié)點或者在render方法中創(chuàng)建的React元素,這篇文章主要給大家介紹了關于React中refs的一些常見用法,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了淺談react-router@4.0 使用方法和源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
詳解React中傳入組件的props改變時更新組件的幾種實現(xiàn)方法
這篇文章主要介紹了詳解React中傳入組件的props改變時更新組件的幾種實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09