锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识配置文件脚手架Create

人生处万类,知识最为贤。这篇文章主要讲述使用 create-react-app 脚手架搭建 react 项目，释放配置文件且注入 less 依赖相关的知识，希望能为你提供帮助。
使用 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代码的使用地点
    • 【使用 create-react-app 脚手架搭建 react 项目，释放配置文件且注入 less 依赖】依照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文件生效

    推荐阅读


    上一篇：没有了

    下一篇：Android 开发基础入门篇: 生成带有签名的apk安装包