一。配置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引入编译的文件
没了！再见！
网友评论