React中引入less、less-loader問題
更新時間：2024年01月24日 10:05:35 作者：dayTimeAffect
這篇文章主要介紹了React中引入less、less-loader問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
前言
官方的 create-react-app創(chuàng)建的項目默認是不支持 less 的，但是又寫不慣其他的預(yù)處理語言
方法
第一步
//安裝 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版本過高導(dǎo)致，使用7.3.0版本即可。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React操作真實DOM實現(xiàn)動態(tài)吸底部的示例
本篇文章主要介紹了React操作真實DOM實現(xiàn)動態(tài)吸底部的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家介紹了Rect Intersection判斷兩個矩形是否相交的算法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了React路由跳轉(zhuǎn)的幾種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
ReactNative中使用Redux架構(gòu)總結(jié)
本篇文章主要介紹了ReactNative中使用Redux架構(gòu)總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
React實現(xiàn)錨點跳轉(zhuǎn)組件附帶吸頂效果的示例代碼
這篇文章主要為大家詳細介紹了React如何實現(xiàn)移動端錨點跳轉(zhuǎn)組件附帶吸頂效果，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-01-01
這篇文章主要介紹了react子組件接收的props賦值給state的陷阱問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了ReactNative集成個推消息推送過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
最近做一個React項目,所有組件都使用了函數(shù)式組件,遇到一個父組件調(diào)用子組件方法的問題,下面這篇文章主要給大家介紹了關(guān)于React父組件調(diào)用子組件中方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
要實現(xiàn)useState的背后原理,則需要深入了解狀態(tài)是如何在函數(shù)組件的渲染周期中保持和更新的,本文將通過一段代碼簡單闡述useState鉤子函數(shù)的實現(xiàn)思路,希望對大家有所幫助2023-12-12
深入理解React中es6創(chuàng)建組件this的方法
this的本質(zhì)可以這樣說，this跟作用域無關(guān)的，只跟執(zhí)行上下文有關(guān)。接下來通過本文給大家介紹React中es6創(chuàng)建組件this的方法，非常不錯，感興趣的朋友一起看看吧2016-08-08