• ArthurSlog

• SLog-93

• Year·1

• Guangzhou·China

• October 8th 2018

善为士者 不武 善战者 不怒 善胜敌者 不与 善用人者 为之下 是谓不争之德 是谓用人之力 是谓配天古之极

开发环境MacOS(Mojave 10.14 (18A391))

信息源

开始编码

• 之前的页面样式 是直接手写的

• 文件代码一旦多起来 开发维护就不方便了

• 本篇来引入less样式预编译器 来升级一下开发工具

• 之前采用react官方的快速开发脚手架工具

• 现在升级为使用 webpack项目构建工具

• 勾选 ‘React‘、 ‘Less’、 ‘React hot loader’，之后 点击‘Get your project as a zip!’ 下载配置好的工程文件

• 解压之后，切换至文件路径下，执行：

sudo npm i

• 等待node模块下载完成，接着

sudo npm install --save-dev less

• 接着把之前的工程源码转移到 新的开发工程中

• 中间进行了一些代码的更新 工程地址

• 你可以下载我的工程文件进行测试

git clone

cd ArthurSlogStore_1

sudo npm i

sudo npm start

• 查看页面 会看到header的样式发生了改变

• 这次修改了一下headerBar的样式

• 在工程根目录新建一个less文件

./index.less

@width: 600px;@height: @width + 10px;#app {    width: @width;    height: @height;    background-color: black;}复制代码

• 随后，在Header.jsx文件里添加

./Header.jsx

import './index.less'复制代码

• 查看页面效果 已经生效

• 剩下的 找时间参照less文档 把已存在的样式转移到less文件里

• 至此，暂时完成了less预编译器的引入 和 使用。

• 欢迎关注我的微信公众号 ArthurSlog

• 如果你喜欢我的文章 欢迎点赞 留言

• 谢谢