亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

如何解決React官方腳手架不支持Less的問題(小結(jié))

 更新時(shí)間:2018年09月12日 14:10:35   作者:Esofar''s blog  
這篇文章主要介紹了如何解決React官方腳手架不支持Less的問題(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

說在前面

create-react-app 是由 React 官方提供并推薦使用構(gòu)建新的 React 單頁(yè)面應(yīng)用程序的最佳方式,不過目前版本(1.5.x)其構(gòu)建的項(xiàng)目中默認(rèn)是不支持動(dòng)態(tài)樣式語(yǔ)言Less 的。如果我們的項(xiàng)目必須要使用 Less 呢,這就需要我們手動(dòng)集成一下。本篇主要針對(duì)集成的過程做一個(gè)簡(jiǎn)要記錄。

環(huán)境準(zhǔn)備

本小節(jié)先用 create-react-app 構(gòu)建一個(gè)全新的 React 項(xiàng)目作為實(shí)驗(yàn)環(huán)境。

如果您之前未曾使用過 create-react-app,請(qǐng)先通過如下命令全局安裝(假定您本機(jī)已經(jīng)安裝了 Node.js):

npm install -g create-react-app

然后,通過如下命令構(gòu)建一個(gè)新的項(xiàng)目my-app:

npx create-react-app my-app

通過cd my-app命令進(jìn)入項(xiàng)目文件夾,執(zhí)行yarn start命令啟動(dòng)程序,成功運(yùn)行,則實(shí)驗(yàn)環(huán)境準(zhǔn)備完畢。

最終項(xiàng)目結(jié)構(gòu):

┌─node_modules 
├─public
├─src      
├─.gitignore
├─package.json
├─README.md
└─yarn.lock

安裝 less & less-loader

要使 create-react-app 構(gòu)建的項(xiàng)目能正常解析 less 文件,只需要讓 webpack 能夠把 less 文件編譯成 css 文件即可。

所以,首先要把 less 和 less-loader (less 編譯器)添加到項(xiàng)目中:

yarn add less less-loader

這樣就 OK 了?以上只是在項(xiàng)目中安裝了 less 和 less-loader ,但還未曾通過 webpack 使用 less-loader。

至于怎么使用?幾種使用方式?請(qǐng)參見 webpack 文檔 ,這里不再贅述。

假定您已經(jīng)仔細(xì)閱讀過上述webpack 文檔,想必您也清楚我們應(yīng)該選擇在webpack.config.js文件中配置 less-loader。

暴露 webpack 配置文件

突然,您會(huì)發(fā)現(xiàn)在我們實(shí)驗(yàn)項(xiàng)目中找不到 webpack 相關(guān)配置文件。

因?yàn)槟_手架為了實(shí)現(xiàn)“零配置”,會(huì)默認(rèn)把一些通用的腳本和配置集成到 react-scripts,目的是讓我們專注于src目錄下的開發(fā)工作,不再操心環(huán)境配置。同時(shí),被其集成的腳本和配置也會(huì)從程序目錄中消失 ,程序目錄也會(huì)變得干凈許多。

如果我們要自定義環(huán)境配置怎么辦?

項(xiàng)目構(gòu)建完成后,會(huì)提供一個(gè)命令yarn eject,通過這個(gè)命令,我們可以把被 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í)行該命令后會(huì)把已構(gòu)建依賴項(xiàng)、配置文件和腳本復(fù)制到程序目錄中。該操作是不可逆轉(zhuǎn)的,執(zhí)行完成后會(huì)刪除這個(gè)命令,也就是說只能執(zhí)行一次。

至于 react-scripts 都集成了哪些東西,通過yarn eject命令的執(zhí)行記錄也能看出個(gè)大概:

λ 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)在怎樣才能在我們的項(xiàng)目中暴露 webpack 的配置文件?沒錯(cuò),你沒猜錯(cuò),只需要運(yùn)行一下yarn eject即可。

再來看我們的實(shí)驗(yàn)項(xiàng)目的目錄,您會(huì)發(fā)現(xiàn)其中多了一個(gè)config文件夾,其中就有三個(gè)關(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)注的是前兩個(gè),最后一個(gè)是關(guān)于本地開發(fā)服務(wù)器http://localhost:3000的一些相關(guān)配置。

修改 webpack 配置

理論上講,需要同步修改 webpack.config.dev.js webpack.config.prod.js 配置文件:

在module.rules節(jié)點(diǎn)中找到 css 文件的加載規(guī)則:

1.test: /\.css$/ 修改為 test: /\.(css|less)$/;
2.在use數(shù)組最后新增一個(gè)對(duì)象元素{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 對(duì) Less 的支持。

效果驗(yàn)證

最后,在我們的實(shí)驗(yàn)項(xiàng)目中驗(yàn)證一下配置是否生效。

首先在src根目錄下使用 Less 語(yǔ)法創(chuàng)建一個(gè) less 文件,取名為Test.less:

@title-color:#f00;

.App-title {
  color: @title-color
 }

然后在App.js文件中通過如下API導(dǎo)入上述的 less 文件:

import './Test.less';

再次yarn start運(yùn)行我們的程序,如果標(biāo)題Welcome to React變成紅色則說明配置沒有問題。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • react基于react-slick實(shí)現(xiàn)多圖輪播效果

    react基于react-slick實(shí)現(xiàn)多圖輪播效果

    React slick是一個(gè)使用React構(gòu)建的輪播組件,下面這篇文章主要給大家介紹了關(guān)于react基于react-slick實(shí)現(xiàn)多圖輪播效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼

    React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼

    這篇文章主要介紹了React+EggJs實(shí)現(xiàn)斷點(diǎn)續(xù)傳的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • React進(jìn)階學(xué)習(xí)之組件的解耦之道

    React進(jìn)階學(xué)習(xí)之組件的解耦之道

    這篇文章主要給大家介紹了關(guān)于React進(jìn)階之組件的解耦之道,文中通過詳細(xì)的示例代碼給大家介紹了組件分割與解耦的方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-08-08
  • react?hooks?d3實(shí)現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解

    react?hooks?d3實(shí)現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解

    這篇文章主要為大家介紹了react?hooks?d3實(shí)現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • react.js實(shí)現(xiàn)頁(yè)面登錄跳轉(zhuǎn)示例

    react.js實(shí)現(xiàn)頁(yè)面登錄跳轉(zhuǎn)示例

    本文主要介紹了react.js實(shí)現(xiàn)頁(yè)面登錄跳轉(zhuǎn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • react實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽方式

    react實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽方式

    這篇文章主要介紹了react實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 詳解React中的useMemo和useCallback的區(qū)別

    詳解React中的useMemo和useCallback的區(qū)別

    React中的useMemo和useCallback是兩個(gè)重要的Hooks。常常被用于優(yōu)化組件的性能。雖然這兩個(gè)Hooks看起來很相似,但它們彼此之間還是有很大的區(qū)別的,隨著小編一起來學(xué)習(xí)吧
    2023-04-04
  • react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解

    react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解

    這篇文章主要為大家介紹了react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • React通過hook實(shí)現(xiàn)封裝表格常用功能

    React通過hook實(shí)現(xiàn)封裝表格常用功能

    這篇文章主要為大家詳細(xì)介紹了React通過hook封裝表格常用功能的使用,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下
    2023-12-12
  • 一文帶你搞懂React中的useReducer

    一文帶你搞懂React中的useReducer

    useReducer 是除useState之外另一個(gè)與狀態(tài)管理相關(guān)的 hook,這篇文章主要為大家介紹了useReducer應(yīng)用的相關(guān)知識(shí),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-06-06

最新評(píng)論