美文网首页
create-react-app 配置 sass

create-react-app 配置 sass

作者: 我叫傻先生 | 来源:发表于2018-01-02 17:56 被阅读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引入编译的文件

    没了!再见!

    相关文章

      网友评论

          本文标题:create-react-app 配置 sass

          本文链接:https://www.haomeiwen.com/subject/sgrqnxtx.html