要在 create-react-app 脚手架里使用 less 的方法
要在 create-react-app 脚手架里使用 less 的方法:
- 在 powershell 里暴露脚手架配置
yarn eject
- 在暴露的 config 文件里面打开 webpack.config.js 文件,然后设置 less
- 66 行 插入 less 更改:
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/
- 500 行,插入:
{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,}, "less-loader"),// 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/6571sideEffects: true,},// Adds support for CSS Modules (https://github.com/css-modules/css-modules)// using the extension .module.css{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {getLocalIdent: getCSSModuleLocalIdent,},}, "less-loader"),
},
- 在 powershell 里安装对应的包(在这里安装的 less-loader 的包是低版本 高版本可能存在不兼容的问题)
yarn add less less-loader@5.0.0
- 配置全部变量(在 react-app-env.d.ts 文件里加入)
declare module '*.less' {interface Style {[propName: string]: string}const style: Styleexport default style
}
- 引用方式(文件名字为 style.module.less)
import style from './style.module.less'
要在 create-react-app 脚手架里使用 less 的方法相关推荐
- react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门 什么是Create React App 快速开始 使用IDE webstrom创建react项目 create react a ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
- Create React App 2.0 正式发布:Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
- 深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- Create React App从使用到Docker部署
一.介绍 Create React App 是 React 脚手架,它帮我们可以快速生成项目的工程化结构,脚手架让项目从搭建到开发再到部署,整个流程变得快速和便捷. 二.安装 Create React ...
- 【翻译】基于 Create React App路由4.0的异步组件加载(Code Splitting)
基于 Create React App路由4.0的异步组件加载 本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
- 如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
- Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
- Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
- Vite 3.0 vs. Create React App:比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
最新文章
- 人生苦短之Python多线程
- 2.2 逻辑回归-机器学习笔记-斯坦福吴恩达教授
- sscanf 连续相同编辑符_基于单调栈的滑动窗口法求解“和至少为 K 的最短连续子数组”...
- Mr.J--C语言经典编程100例
- zabbix 自定义监控项 获取nginx监控状态
- 用户的大量数据保存在计算机的,计算机基础理论复习题
- latex ref引用章节号
- FLEX地图应用教程集
- linux0.11 80386段
- Numpy 用 npy/npz 文件保存与载入数据
- mysql主从复制报错:the master has purged binary logs containing GTIDs that the slave requires
- VMware破解虚拟机内存cpu最大限制
- UVALive3713 Astronauts
- Android向系统日历添加日程提醒事件
- 菜鸟日记(yzy):opencMS系统-XML内容管理文件开发
- 计算机考研有什么公众号,大学生应该关注的公众号有哪些推荐?
- 辨大势定内局,解析新时代下的企业新刚需
- 可视化,mapboxGL加载台风风场动画
- 孙子兵法——三十六计
- 洞见 SELENIUM 自动化测试