css modules

src/app/layouts/AppLayout.jsx

@@ -1,11 +1,13 @@
-import Header from './Header'
-import Footer from './Footer'
+import Header from './header/Header'
+import Footer from './footer/Footer'
+
+import classNames from './styles.scss'
 
 export default function AppLayout({ children }) {
   return (
-    <div className="wrapper">
+    <div className={classNames.wrapper}>
       <Header />
-      <div className="main">
+      <div className={classNames.main}>
         {children}
       </div>
       <Footer />

src/app/layouts/Footer.jsx → src/app/layouts/footer/Footer.jsx

@@ -1,9 +1,11 @@
 import { Component } from 'react'
 
+import classNames from './styles.scss'
+
 export default class Footer extends Component {
   render() {
     return (
-      <footer>Footer</footer>
+      <footer className={classNames.footer}>Footer</footer>
     )
   }
 }

src/app/layouts/footer/styles.scss

@@ -0,0 +1,7 @@
+@import 'variables';
+
+.footer {
+  height: $footer-height;
+  background-color: $primary;
+  color: #fff;
+}

src/app/layouts/Header.jsx → src/app/layouts/header/Header.jsx

@@ -1,10 +1,12 @@
 import { Component } from 'react'
 import { Link } from 'common/router/Link'
 
+import classNames from './styles.scss'
+
 export default class Header extends Component {
   render() {
     return (
-      <header>
+      <header className={classNames.header}>
         <Link to="root">Logo</Link>
         <Link to="test">test</Link>
       </header>

src/app/layouts/header/styles.scss

@@ -0,0 +1,8 @@
+@import 'variables';
+
+.header {
+  height: $header-height;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-around;
+}

src/app/layouts/styles.scss

@@ -0,0 +1,11 @@
+@import 'variables';
+
+.wrapper {
+  height: 100%;
+  background-color: $gray-100;
+}
+
+.main {
+  height: calc(100% - #{$header-height} - #{$footer-height});
+  overflow: auto;
+}

src/app/pages/auth/LoginForm.jsx

@@ -1,12 +1,13 @@
 import { TextField } from 'common/forms'
+import classNames from './styles.scss'
 
 export default function LoginForm({ handleSubmit }) {
   return (
     <form onSubmit={handleSubmit}>
       <h2>Login</h2>
       <TextField name="email" label="Email" type="email" />
       <TextField name="password" label="Password" type="password" />
-      <button>Login</button>
+      <button className={classNames.btn}>Login</button>
     </form>
   )
 }

src/app/pages/auth/styles.scss

@@ -0,0 +1,5 @@
+@import 'variables';
+
+.btn {
+  background: $secondary;
+}

src/styles/_variables.scss

@@ -1,3 +1,6 @@
+@import "functions";
+@import "mixins";
+
 /* stylelint-disable number-leading-zero  */
 // Variables
 //

src/styles/index.scss

@@ -1,9 +1,10 @@
 @import "bootstrap";
-@import "./layout";
 
-html,
-body,
-#root {
-  height: 100%;
-  display: block;
+:global {
+  html,
+  body,
+  #root {
+    height: 100%;
+    display: block;
+  }
 }