一开始参考官网文档,添加sass语法的支持,adding-a-css-preprocessor-sass-less-etc,折腾半天,但是程序并没有按照预期执行,虽然可以监听到改变,但是页面的样式并没有应用上。
项目代码:
页面

样式文件

组件

登陆按钮的样式并没有应用上设置的样式。
于是决定自己动手
第一步:
解开封印 npm run eject
执行后会得到一大堆文件,找到config文件夹下的webpack.config.dev.js文件
增改如下代码:

第二步:
安装依赖 npm install --save-dev sass-loader node-sass
完成上面两步后,执行npm run start

但是,不要觉得到这里就结束了,找到config下的webpack.config.prod.js文件,也要做同样修改。

修改完后,运行npm run build
检查打包是否正确。
在build/static/css/main.xxx.css搜索一下,是否有我们写入的样式。

至此已经完成了在create-react-app添加sass语法的支持。