react 路由、移动端适配以及less配置

一. 路由设置

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

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

引入依赖之后，配置路由文件：

src下创建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页面相关内容。

二. 移动端适配

在 react 项目中做移动端适配，也需先引入先关依赖：

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

依赖安装完成之后，需要使用 yarn eject 命令暴露项目相关的webpack配置文件，找到webpack.config.js，并做修改:

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

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

然后在一下代码的位置，设置根目录字体大小：

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(),
    
            // 移动端适配
            px2rem({ remUnit: 37.5 })
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },

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

import 'lib-flexible';

最后，重启项目，在调试中看到 “将根据已有的meta标签来设置缩放比例” 字幕，即表示适配成功。

三. 引入less

同样，首先引入less 和 less-loader 相关配置：

yarn add less less-loader -S

然后，在webpack.config.js 文件中找到 style files regexes 这个位置，并配置 less 相关规则：

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，并调用，如下：

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,
                },
              }),
            },

最后，重启项目，引入less文件，即可。