React中less和stylus的使用

刺骨的言语ヽ痛彻心扉 2023-03-03 15:29 30阅读 0赞

# 在react中使用stylus #

### 下载 ###

npm i stylus stylus-loader --save-dev

### 修改配置 ###

暴露webpack.config.js文件

npm run eject

若是报错，运行git add .     git commit –m ‘xxx’   将文件保存到暂存再运行

在webpack.config.js中修改

![20200731212831119.png][]

添加

const stylusRegex = /\\.styl|stylus$/;

const stylusModuleRegex = /\\.module\\.styl|stylus$/;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70][]

在此位置添加stylus配置文件

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> // stylus 配置文件 &nbsp;{ &nbsp;&nbsp; test: stylusRegex, &nbsp;&nbsp; exclude: stylusModuleRegex, &nbsp;&nbsp; use: getStyleLoaders({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; importLoaders: 2, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sourceMap: isEnvProduction &amp;&amp; shouldUseSourceMap, &nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp;&nbsp; 'stylus-loader' &nbsp;&nbsp; ), &nbsp;&nbsp; sideEffects: true, &nbsp;}, { &nbsp;&nbsp; test: stylusModuleRegex, &nbsp;&nbsp; use: getStyleLoaders({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; importLoaders: 2, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sourceMap: isEnvProduction &amp;&amp; shouldUseSourceMap, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; modules: true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; getLocalIdent: getCSSModuleLocalIdent, &nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp;&nbsp; 'stylus-loader' &nbsp;&nbsp; ), &nbsp;}, </td> 
 </tr> 
 </tbody> 
</table>

# 在react中使用less #

### 下载 ###

npm i less less-loader

### 修改webpack.config.js文件 ###

![20200731212853177.png][]

![20200731212859104.png][]

### 使用pxtorem ###

下载postcss-px2rem,在postcss-loader中配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 1][]

[20200731212831119.png]: /images/20230208/a61cf46266514dd7947b22b48466278b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70]: /images/20230208/57de7b306c0543f8b79fcdc2333c362b.png
[20200731212853177.png]: /images/20230208/b0247bd0707e4824a8068ccc7873419a.png
[20200731212859104.png]: /images/20230208/11f1c4d6c7f544fb9c79900583ab9ed9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Noa3N0YXJ0_size_16_color_FFFFFF_t_70 1]: /images/20230208/36407a57faee476aaced592eedaa0a98.png