使用 create-react-app 脚手架搭建 react 项目，释放配置文件且注入 less 依赖

Posted 2020-11-22 KLDN_如初

使用 create-react-app 脚手架搭建 react 项目，释放配置文件且注入 less 依赖

使用 create-react-app 搭建项目

1. 使用npm安装create-react-app脚手架

   • // 全局安装 create-react-app 脚手架
     npm install -g create-react-app

2. 使用create-react-app脚手架创建项目

   • // 创建 react 项目 sharing-bicycle
     create-react-app sharing-bicycle

3. 根据需求加载项目所需依赖包

   • // 此处主要演示 less 和 less-loader 依赖包
     // 依赖包之间使用空格隔开，--save 将依赖包的信息写入 package.json 文件中
     npm install less less-loader --save

4. 释放配置文件

   • // 加载相应依赖之后，要将修改了的文件添加提交到本地仓库中，不然释放会报错
     // 方式一
     git add .
     git commit -m 'Save before ejecting.'
     // 方式二
     git commit -am 'Save before ejecting.'
     
     // 提交完成后，释放配置文件
     npm run eject

5. 注入less依赖

   • 找到config文件夹下的webpack.config.js文件，添加以下两端代码

     • // 先找到如下代码，可以使用 Ctrl+F 搜索任意单词
       
       // style files regexes
       const cssRegex = /.css$/;
       const cssModuleRegex = /.module.css$/;
       const sassRegex = /.(scss|sass)$/;
       const sassModuleRegex = /.module.(scss|sass)$/;
       
       // 在上述代码下添加如下两行代码
       
       // Provide less support
       const lessRegex =/.less$/;
       const lessModuleRegex=/.module.less$/;

   • 使用 Ctrl+F 定位代码中cssRegex代码的使用地点

   • 依照cssRegex的书写方式配置less依赖

     • {
         test: lessRegex,
         exclude: lessModuleRegex,
         use: getStyleLoaders(
           {
             importLoaders: 2,
             sourceMap: isEnvProduction && shouldUseSourceMap,
           },
           'less-loader'
         ),
         sideEffects: true,
       },
       {
         test: lessModuleRegex,
         use: getStyleLoaders(
           {
             importLoaders: 2,
             sourceMap: isEnvProduction && shouldUseSourceMap,
             modules: true,
             getLocalIdent: getCSSModuleLocalIdent,
           },
           'less-loader'
         ),
       },

6. 完成以上步骤，可以添加.less样式文件测试，如果以上过程均无错误，运行项目则.less文件生效