快捷導(dǎo)航

在react配置使用less的完美方案

更新時(shí)間：2024年04月24日 10:41:47 作者：佛系努力中……

由于 create-react-app 使用 webpack 作為其模塊打包器,你需要修改 webpack 的配置來支持 .less 文件,這篇文章主要介紹了在react配置使用less的完美方案,需要的朋友可以參考下

在react配置使用less的最優(yōu)解

react默認(rèn)支持用scss，不支持less，直接使用less時(shí)會(huì)報(bào)錯(cuò)，因此當(dāng)使用less的時(shí)候需要進(jìn)行額外配置。至于技術(shù)選型選擇less或scss完全取決于你的個(gè)人偏好。你當(dāng)然可以采取別的方式去實(shí)現(xiàn)對(duì)less的配置。但是我這里只提供了一種方式用于解決問題，主要是為了記錄，便于自己日后查看。

安裝

npm install less less-loader --save-dev
//
yarn add less less-loader --dev

配置 webpack

由于 create-react-app 使用 webpack 作為其模塊打包器，你需要修改 webpack 的配置來支持 .less 文件。為此，你可以使用 react-app-rewired 和 customize-cra。

首先，安裝這三個(gè)依賴：

npm install npm install react-app-rewired customize-cra babel-plugin-import --save-dev
//
yarn add npm install react-app-rewired customize-cra babel-plugin-import

修改你的項(xiàng)目中的 package.json 文件，將 scripts 中的 start 和 build 命令替換為使用 react-app-rewired 的命令。例如：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

-在根目錄下創(chuàng)建一個(gè)新的配置文件 config-overrides.js 在項(xiàng)目根目錄下，并添加以下內(nèi)容來覆蓋默認(rèn)的 webpack 配置以支持 Less：

config-overrides.js是一個(gè)用于覆蓋create-react-app默認(rèn)配置的文件。它允許開發(fā)人員在不強(qiáng)制eject的情況下修改webpack配置。通過使用config-overrides.js，開發(fā)人員可以添加自定義webpack配置，例如添加新的loader或plugin。

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd', // 如果你的項(xiàng)目中使用了 antd 或其他庫(kù)需要按需加載樣式，請(qǐng)相應(yīng)地修改這里。
    libraryDirectory: 'es', // 默認(rèn)值是 'lib'，如果你使用的是 antd 的 es 模塊版本，請(qǐng)修改這里。
  }),
  addLessLoader({ lessOptions: { javascriptEnabled: true } }) // 啟用 JavaScript 在 Less 中的支持（如果需要的話）。
);

在組件中使用 Less:

現(xiàn)在你可以在組件中使用 .less 文件了。例如，你可以創(chuàng)建一個(gè)名為 MyComponent.less 的文件，并在你的 React 組件中這樣導(dǎo)入它：

import './MyComponent.less'; // 使用相對(duì)路徑導(dǎo)入你的 .less 文件。

報(bào)錯(cuò)

在配置過程中可能會(huì)出現(xiàn)以下報(bào)錯(cuò)信息

Syntax Error: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

options has an unknown property ‘plugins’. These properties are valid:
object { postcssOptions?, execute?, sourceMap?, implementation? }

別問，問就是我也不知道到為啥，嘗試以下方式解決

降低less-loader版本至5.0.0

yarn remove less-loader
yarn add less-loader@5.0.0

2.修改config-overrides.js配置（我是這么解決的）

customize-cra-less-loader

const { override } = require("customize-cra");
const addLessLoader = require("customize-cra-less-loader");
module.exports = override(
  addLessLoader({
    lessLoaderOptions: {
      lessOptions: {
        javascriptEnabled: true,
        modifyVars: {
          '@primary-color': '#038fde',
        }
      }
    }
  })
);

到此這篇關(guān)于在react配置使用less的最優(yōu)解的文章就介紹到這了,更多相關(guān)react配置使用less內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: