create-react-app 配置 sass

2018-01-02  本文已影响0人  我叫傻先生

一。配置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 组件中引入


看啥这是截图
  1. npm start
    看啥这是截图

二,通过sass实时编译
操作(不截图了)
src目录下新建Sass文件夹
Sass文件夹下新建main.scss文件
main.scss文件通过@import 引入所有的sass文件,它是所有scss文件的入口
利用ruby对main.scss文件实时编译
react入口文件index.js引入编译的文件

没了!再见!

上一篇下一篇

猜你喜欢

热点阅读