如何在react中使用less

目前創建react項目一般使用 create-react-app 這個腳手架工具來創建，但這種方式默認沒有對於less的配置。所以我們自己配置一下：

1. 暴露出webpack配置文件

使用create-react-app 創建的項目默認是看不到webpack配置文件的，需要先暴露出來，然后才能修改里面的配置信息。

終端運行一下命令（注意：此命令一旦運行會修改package.json 文件，不可回退）

npm run eject

2. 安裝less和less-loader

運行以下命令：

npm install less-loader less --save

如果遇到安裝失敗的情況，請改用cnpm。

3. 修改webpack配置文件

運行完以上命令后，項目根目錄下會多出一個 config 文件夾，找到里面的 webpack.config.js 這個文件

 

image

3.1 增加less配置1

找到下面這段代碼

 

image

在這下面直接添加以下代碼：

const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; 

道理大家應該懂：webpack里配置了css和sass，我們想用less就需要加入less配置。

3.2 增加less配置2

在此文件中搜索 oneof

 

3.png

可以看到關於sass部分的配置，那我們再加入less的相關配置：先復制一份，將sass部分修改為less，再加入oneOf數組。

把我的復制出來，大家可以直接用：

 

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'less-loader'
  ),
},

　　

這樣就配置完成，可以直接使用less了。

作者：LilyLaw
鏈接：https://www.jianshu.com/p/d5dd8b108461
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。