一. 路由設(shè)置

首先 react 配置路由需要引入 react-router-dom 依賴：

yarn add react-router-dom -S or npm i react-router-dom -S 

引入依賴之后显设，配置路由文件：

src下創(chuàng)建components文件夾以及Home.jsx和Login.jsx:

// App.js

import React, { Component } from 'react';
// 引入路由
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

// 路由頁面
import Home from './components/Home';
import Login from './components/Login';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (
            <Router>
                <ul className="topBar">
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/login">Login</Link></li>
                </ul>
                <Route exact path="/" component={Home}/>
                <Route path="/login" component={Login}/>
            </Router>
        );
    }
}
export default App;

最后寫好Home和Login頁面相關(guān)內(nèi)容剪返。

二. 移動(dòng)端適配

在 react 項(xiàng)目中做移動(dòng)端適配扁誓，也需先引入先關(guān)依賴：

yarn add lib-flexible -S
yarn add postcss-px2rem -S 

依賴安裝完成之后，需要使用 yarn eject 命令暴露項(xiàng)目相關(guān)的webpack配置文件尿瞭，找到webpack.config.js闽烙，并做修改:

首先在webpack.config.js中引入：

const px2rem = require('postcss-px2rem');

然后在一下代碼的位置，設(shè)置根目錄字體大锌昀濉：

options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            postcssNormalize(),
    
            // 移動(dòng)端適配
            px2rem({ remUnit: 37.5 })
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },

然后鸣峭，在index.js文件中引入：

import 'lib-flexible';

最后宏所，重啟項(xiàng)目，在調(diào)試中看到 “將根據(jù)已有的meta標(biāo)簽來設(shè)置縮放比例” 字幕摊溶，即表示適配成功爬骤。

三. 引入less

同樣，首先引入less 和 less-loader 相關(guān)配置：

yarn add less less-loader -S

然后莫换，在webpack.config.js 文件中找到 style files regexes 這個(gè)位置霞玄， 并配置 less 相關(guān)規(guī)則：

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
// 引入less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

然后在getStyleLoaders方法處， 模仿cssOptions拉岁，引入lessOptions坷剧，并調(diào)用，如下：

const getStyleLoaders = (cssOptions, lessOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
        options: paths.publicUrlOrPath.startsWith('.')
          ? { publicPath: '../../' }
          : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        loader: require.resolve('less-loader'),
        options: lessOptions,
      },
      ... // 省略以下代碼
}

最后在大概440行處喊暖，模仿cssRegex和cssModuleRegex惫企，引入lessRegex和lessModuleRegex，如下：

            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // 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 (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: {
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              }),
            },

            // 引入less
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: {
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              }),
            },

最后陵叽，重啟項(xiàng)目狞尔，引入less文件，即可巩掺。