React配置sass样式

React配置sass样式

1、安装sass库

yarn add node-sass sass-loader

2、sass样式示例

.content {
  height: calc(100vh - 69px);
  overflow: hidden;
  display: flex;

  .form {
    width: 350px;
    margin: auto;
    padding: 50px 30px;
    min-width: 300px;
    }
  }
}

.footer {
  text-align: center;
  color: #bbb;
}

3、引入并应用示例

import styles from './index.scss';

const index = () => {
  return (
    <Layout>
      <Content className={styles.content}>
        <div className={styles.form}>
          <h1>
            <img src={require('@/assets/logo2.png')} alt="logo2" />
            管理系统
          </h1>
        </div>
      </Content>
      <Footer className={styles.footer}>
        Copyright <Icon type="copyright" /> 2020 米修在线
      </Footer>
    </Layout>
  );
};

export default index;