快速在create-react-app框架添加sass支持

1,210 阅读1分钟

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

项目代码:

页面

样式文件

组件

登陆按钮的样式并没有应用上设置的样式。

于是决定自己动手

第一步:

解开封印 npm run eject

执行后会得到一大堆文件,找到config文件夹下的webpack.config.dev.js文件

增改如下代码:

webpack.config.dev.js

第二步:

安装依赖 npm install --save-dev sass-loader node-sass

完成上面两步后,执行npm run start

OK,已经正确显示了。

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

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

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