如何解決React官方腳手架不支持Less的問題(小結(jié))
說在前面
create-react-app 是由 React 官方提供并推薦使用構(gòu)建新的 React 單頁面應(yīng)用程序的最佳方式，不過目前版本(1.5.x)其構(gòu)建的項目中默認是不支持動態(tài)樣式語言Less 的。如果我們的項目必須要使用 Less 呢，這就需要我們手動集成一下。本篇主要針對集成的過程做一個簡要記錄。
環(huán)境準備
本小節(jié)先用 create-react-app 構(gòu)建一個全新的 React 項目作為實驗環(huán)境。
如果您之前未曾使用過 create-react-app，請先通過如下命令全局安裝（假定您本機已經(jīng)安裝了 Node.js）：
npm install -g create-react-app
然后，通過如下命令構(gòu)建一個新的項目my-app：
npx create-react-app my-app
通過cd my-app命令進入項目文件夾，執(zhí)行yarn start命令啟動程序，成功運行，則實驗環(huán)境準備完畢。
最終項目結(jié)構(gòu)：
┌─node_modules ├─public ├─src ├─.gitignore ├─package.json ├─README.md └─yarn.lock
安裝 less & less-loader
要使 create-react-app 構(gòu)建的項目能正常解析 less 文件，只需要讓 webpack 能夠把 less 文件編譯成 css 文件即可。
所以，首先要把 less 和 less-loader (less 編譯器)添加到項目中：
yarn add less less-loader
這樣就 OK 了？以上只是在項目中安裝了 less 和 less-loader ，但還未曾通過 webpack 使用 less-loader。
至于怎么使用？幾種使用方式？請參見 webpack 文檔 ，這里不再贅述。
假定您已經(jīng)仔細閱讀過上述webpack 文檔，想必您也清楚我們應(yīng)該選擇在webpack.config.js文件中配置 less-loader。
暴露 webpack 配置文件
突然，您會發(fā)現(xiàn)在我們實驗項目中找不到 webpack 相關(guān)配置文件。
因為腳手架為了實現(xiàn)“零配置”，會默認把一些通用的腳本和配置集成到 react-scripts，目的是讓我們專注于src目錄下的開發(fā)工作，不再操心環(huán)境配置。同時，被其集成的腳本和配置也會從程序目錄中消失 ，程序目錄也會變得干凈許多。
如果我們要自定義環(huán)境配置怎么辦？
項目構(gòu)建完成后，會提供一個命令yarn eject，通過這個命令，我們可以把被 react-scripts 集成的配置和腳本暴露出來。
以下是腳手架關(guān)于yarn eject命令的介紹：
yarn eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can't go back!
大概意思是，執(zhí)行該命令后會把已構(gòu)建依賴項、配置文件和腳本復制到程序目錄中。該操作是不可逆轉(zhuǎn)的，執(zhí)行完成后會刪除這個命令，也就是說只能執(zhí)行一次。
至于 react-scripts 都集成了哪些東西，通過yarn eject命令的執(zhí)行記錄也能看出個大概：
λ yarn eject yarn run v1.6.0 $ react-scripts eject ? Are you sure you want to eject? This action is permanent. Yes Ejecting... Copying files into E:\React\my-app Adding \config\env.js to the project Adding \config\paths.js to the project Adding \config\polyfills.js to the project Adding \config\webpack.config.dev.js to the project Adding \config\webpack.config.prod.js to the project Adding \config\webpackDevServer.config.js to the project Adding \config\jest\cssTransform.js to the project Adding \config\jest\fileTransform.js to the project Adding \scripts\build.js to the project Adding \scripts\start.js to the project Adding \scripts\test.js to the project Updating the dependencies Removing react-scripts from dependencies Adding autoprefixer to dependencies Adding babel-core to dependencies Adding babel-eslint to dependencies Adding babel-jest to dependencies Adding babel-loader to dependencies Adding babel-preset-react-app to dependencies Adding babel-runtime to dependencies Adding case-sensitive-paths-webpack-plugin to dependencies Adding chalk to dependencies Adding css-loader to dependencies Adding dotenv to dependencies Adding dotenv-expand to dependencies Adding eslint to dependencies Adding eslint-config-react-app to dependencies Adding eslint-loader to dependencies Adding eslint-plugin-flowtype to dependencies Adding eslint-plugin-import to dependencies Adding eslint-plugin-jsx-a11y to dependencies Adding eslint-plugin-react to dependencies Adding extract-text-webpack-plugin to dependencies Adding file-loader to dependencies Adding fs-extra to dependencies Adding html-webpack-plugin to dependencies Adding jest to dependencies Adding object-assign to dependencies Adding postcss-flexbugs-fixes to dependencies Adding postcss-loader to dependencies Adding promise to dependencies Adding raf to dependencies Adding react-dev-utils to dependencies Adding resolve to dependencies Adding style-loader to dependencies Adding sw-precache-webpack-plugin to dependencies Adding url-loader to dependencies Adding webpack to dependencies Adding webpack-dev-server to dependencies Adding webpack-manifest-plugin to dependencies Adding whatwg-fetch to dependencies Updating the scripts Replacing "react-scripts start" with "node scripts/start.js" Replacing "react-scripts build" with "node scripts/build.js" Replacing "react-scripts test" with "node scripts/test.js" Configuring package.json Adding Jest configuration Adding Babel preset Adding ESLint configuration Ejected successfully! Please consider sharing why you ejected in this survey: http://goo.gl/forms/Bi6CZjk1EqsdelXk1 Done in 5.37s.
說了這么多，現(xiàn)在怎樣才能在我們的項目中暴露 webpack 的配置文件？沒錯，你沒猜錯，只需要運行一下yarn eject即可。
再來看我們的實驗項目的目錄，您會發(fā)現(xiàn)其中多了一個config文件夾，其中就有三個關(guān)于 webpack 的配置文件：
webpack.config.dev.js # 開發(fā)環(huán)境配置 webpack.config.prod.js # 生產(chǎn)環(huán)境配置 webpackDevServer.config.js # 開發(fā)服務(wù)器配置
我們需要關(guān)注的是前兩個，最后一個是關(guān)于本地開發(fā)服務(wù)器http://localhost:3000的一些相關(guān)配置。
修改 webpack 配置
理論上講，需要同步修改 webpack.config.dev.js 和 webpack.config.prod.js 配置文件：
在module.rules節(jié)點中找到 css 文件的加載規(guī)則：
1.test: /\.css$/ 修改為 test: /\.(css|less)$/；
2.在use數(shù)組最后新增一個對象元素{loader: require.resolve('less-loader')}。
修改完成后：
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader')
}
],
},
至此，就已經(jīng)完成了create-react-app 對 Less 的支持。
效果驗證
最后，在我們的實驗項目中驗證一下配置是否生效。
首先在src根目錄下使用 Less 語法創(chuàng)建一個 less 文件，取名為Test.less：
@title-color:#f00;
.App-title {
color: @title-color
}
然后在App.js文件中通過如下API導入上述的 less 文件：
import './Test.less';
再次yarn start運行我們的程序，如果標題Welcome to React變成紅色則說明配置沒有問題。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React BootStrap用戶體驗框架快速上手的相關(guān)知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03
React使用Echarts/Ant-design-charts的案例代碼
這篇文章主要介紹了React使用Echarts/Ant-design-charts的實例代碼，本文通過實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11
這篇文章主要為大家介紹了React 和 Redux的關(guān)系，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
本篇文章主要介紹了React中常見的動畫實現(xiàn)的幾種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
React中useEffect 與 useLayoutEffect的區(qū)別
本文主要介紹了React中useEffect與useLayoutEffect的區(qū)別，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-07-07
React+umi+typeScript創(chuàng)建項目的過程
這篇文章主要介紹了React+umi+typeScript創(chuàng)建項目的過程,結(jié)合代碼介紹了項目框架搭建的方式，本文給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了React Form組件的實現(xiàn)封裝雜談，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家介紹了create-react-app開發(fā)常用配置教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
關(guān)于react+antd樣式不生效問題的解決方式
最近本人在使用Antd開發(fā)時遇到些問題,所以下面這篇文章主要給大家介紹了關(guān)于react+antd樣式不生效問題的解決方式,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
ReactNative 之FlatList使用及踩坑封裝總結(jié)
本篇文章主要介紹了ReactNative 之FlatList使用及踩坑封裝總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11