在我們的React學(xué)過(guò)程中，當(dāng)我們?cè)谛枰煌膬?nèi)容時(shí)都需要自己進(jìn)行配置和調(diào)試，那么今天我們就來(lái)說(shuō)下“React怎么配置less和less的全局變量設(shè)置？”這個(gè)問(wèn)題，以下是小編收集的相關(guān)內(nèi)容，大家可以作為參考學(xué)習(xí)。
一、配置Less
1.在項(xiàng)目中下載安裝插件less，代碼如下：
npm install --save less less-loader
或
yarn add --save less less-loader
2.暴露配置文件
我們使用這串代碼 ?yarn eject?。
3.配置?webpack.config.js?文件.
我們?cè)陧?xiàng)目中找到匹配loade的正則表達(dá)式，按照css的樣子添加less，代碼如下：
const cssRegex = /\.css$/
const cssModuleRegex =/\.module\.css$/
const sassRegex = /\.(scss | sass)$/
const sassModuleRegex = /\.module\.(scss |sass)$/
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/
4.配置less
我們?cè)谖覀円阎捻?xiàng)目中，找到之前設(shè)置好的sass沒(méi)然后我們通過(guò)配置less找到sass所在位置，在其下方將less配置,代碼截圖如下：
通過(guò)添加代碼我們就可以完成配置了，重啟之后就生效了。！
二、less全局變量
1.安裝插件
我們?cè)陧?xiàng)目中安裝style-resource插件，代碼如下：
npm install --save-dev style-resources-loader
和
yarn add --save-dev style-resources-loader
完成之后我們?cè)谖覀冊(cè)诘谝徊街械呐渲胠ess中進(jìn)行配置代碼截圖如下：
而且在這里我們要注意，ues在這里設(shè)置全局變量之后就我們的“{}”會(huì)變成[],還有我們?cè)谠O(shè)置中的patterns的路徑一定要設(shè)置對(duì)，我們來(lái)看下下面這個(gè)代碼吧！，大家可以作為參考！
// 配置less ---------- Start
{
test: lessRegex,
exclude: cssModuleRegex,
use: [
...getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
{
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname, '../src/common.less'),
},
},
],
sideEffects: true,
},
{
test: lessModuleRegex,
use: [
...getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
{
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname, '../src/common.less'),
},
},
],
},
// 配置less ---------- End
總結(jié)：
以上就是有關(guān)于“React怎么配置less和less的全局變量設(shè)置？”這個(gè)問(wèn)題的解答，希望對(duì)你們有所幫助。當(dāng)然你如果有更好的想法可以和大家一起分享。更多關(guān)于react學(xué)習(xí)知識(shí)和考點(diǎn)，我們都可以在React教程中精進(jìn)行學(xué)習(xí)。
