在create-react-app创建的react项目中使用stylus

前段时间接触到了stylus,它是一款css预处理器,感觉用起来蛮顺手的,初次接触react,我想用styl文件编写css,所以就找了找资料.有需要可以参考!!!

1. 把配置文件暴露出来

cnpm run eject

2. 修改开发环境的配置文件

路径:    /config/webpack.config.dev.js

在create-react-app创建的react项目中使用stylus_第1张图片

3. 修改生产环境的配置文件

路径:    /config/webpack.config.prod.js

在create-react-app创建的react项目中使用stylus_第2张图片

4. 安装依赖

cnpm install stylus stylus-loader --save-dev

5. 测试

1.新建测试文件
在create-react-app创建的react项目中使用stylus_第3张图片

2.引入styl文件

在create-react-app创建的react项目中使用stylus_第4张图片

3.开发环境测试

cnpm run start

在create-react-app创建的react项目中使用stylus_第5张图片

4.生产环境测试

cnpm run build

打开/build/index.html

在create-react-app创建的react项目中使用stylus_第6张图片

参考文章

如何在react里用stylus


React加载stylus文件

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