react项目中使用sass样式

加500行埋点是不是会占用你一天的时间而且很容易犯错,如果你想只用一小时准确加完这500行埋点剩下一天喝茶聊天来试试这520工具,高效加埋点，目前我们公司100号前端都在用

http://www.520webtool.com/

自己开发所以免费，里面有使用视频

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhy1006894859/article/details/89509214
本文主要介绍如何在使用create-react-app创建的react项目中使用sass来编写样式文件。

本文github：https://github.com/hushaohhy/react-router-dom-demo/tree/future/1.0.1

1、展示全部文件

在项目的根目录下，执行以下命令，将简化版的项目结构全部展示。

npm run eject
2、在package.json中可以发现已经存在sass-loader，但是想使用sass还需要引入node-sass

yarn add node-sass --save-dev
3、安装好之后可以在src下使用scss

在components中新建一个btn目录，里面所放的组件是用sass写的样式。

btn.js文件：

import React, { Component } from 'react';
import './btn.scss'
 
export default class BtnCommon extends Component{
    constructor(props) {
        super(props)
 
    }
    componentWillMount() {
 
    }
 
    render() {
        return (
            <div className="btn-common">
              <button>这是btn组件</button>
            </div>
        )
    }
}
btn.scss文件：

.btn-common {
  //border: 1px red solid;
  button {
    border: none;
    background: none;
    outline: none;
    border: 1px red solid;
  }
}
在其他组件中引入btn组件。

启动项目（npm start）可以发现样式已经可以使用了。
————————————————
版权声明：本文为CSDN博主「看淡江湖」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hhy1006894859/article/details/89509214