react ^16.8.6 添加 stylus & less ; 配置alias别名 @

前提: 使用 yarn create react-app 创建的项目,yarn add antd 引入 antd

1. yarn run eject

2. yarn add stylus stylus-loader

如果需要 less, 则将此文出现的stylus统统替换为less, 或者追加less, 让stylus与less同时生效

此时重启,可能会报错如下,删除node_modules, 执行yarn重新安装所有的包,重启,通过。
(报错原因不知)

react ^16.8.6 添加 stylus & less ; 配置alias别名 @_第1张图片

3. 修改webpack.config.js, 红框部分未更新后的内容

react ^16.8.6 添加 stylus & less ; 配置alias别名 @_第2张图片

react ^16.8.6 添加 stylus & less ; 配置alias别名 @_第3张图片

react ^16.8.6 添加 stylus & less ; 配置alias别名 @_第4张图片

4. 重启 yarn start, 完成

react ^16.8.6 添加 stylus & less ; 配置alias别名 @_第5张图片

配置alias别名 @

操作如下,重启生效
react ^16.8.6 添加 stylus & less ; 配置alias别名 @_第6张图片

补充配置stylus的简便方法,插件安装好后,添加如下图所示在config文件添加粗线框内代码即可

react ^16.8.6 添加 stylus & less ; 配置alias别名 @_第7张图片

你可能感兴趣的:(react.js,stylus)