一。配置webpack文件
1.npm install sass-loader node-sass --save-dev 或
cnpm install sass-loader node-sass --save-dev 或
yarn add sass-loader node-sass
2.找到node_module/react-scripts/config/目录下webpack.config.dev.js和
webpack.config.prod.js两个文件
前者是开发环境的配置文件,后者是生产环境,所以修改的时候,作同样修改
在file-loader前面添加css预处理器
如果在file-loader后面
添加file-loader排除规则
3.创建sass文件
4.在你的react 组件中引入
-
npm start
二,通过sass实时编译
操作(不截图了)
src目录下新建Sass文件夹
Sass文件夹下新建main.scss文件
main.scss文件通过@import 引入所有的sass文件,它是所有scss文件的入口
利用ruby对main.scss文件实时编译
react入口文件index.js引入编译的文件
没了!再见!