Joe1220

import React, { Component } from "react";
import logo from "./logo.svg";
import styles from "./App.scss";

class App extends Component {
  render() {
    return (
      <div className={styles.App}>
        <header className={styles.App__header}>
          <img src={logo} className={styles.App__logo} alt="logo" />

Joe1220

$bg-color: red;

.App {
  text-align: center;
  color: $bg-color;
}

.App__logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;

Joe1220

import React from "react";
import styles from "./styles.scss";

const Footer = (props, context) => (
  <footer className={styles.footer}>
    <div className={styles.column}>
      <nav className={styles.nav}>
        <ul className={styles.list}>
          <li className={styles.listItem}>About</li>
          <li className={styles.listItem}>Support</li>

Joe1220

import React from "react";
import styles from "./styles.scss";

const Footer = (props, context) => (
  <footer className={styles.footer}>
    <div className={styles.column}>
      <nav className={styles.nav}>
        <ul className={styles.list}>
          <li className={styles.listItem}>About</li>
          <li className={styles.listItem}>Support</li>

Joe1220

.footer {
  max-width: $max-page-width;
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  text-transform: uppercase;
  font-size: $small-font-size;
  margin: 55px auto;

Joe1220

{
  loader: require.resolve("sass-loader"),
  options: {
    sourceMap: true,
    data: `@import "C:/workspace/scss_test/src/config/_variables.scss";`
  }
}

Joe1220

@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

Joe1220

@import "./_colors.scss";
@import "./_sizes.scss";
@import "./_mixin.scss";

Joe1220

@import "./_colors.scss";
@import "./_mixin.scss";

Joe1220

@mixin breakpoint($breakpoint) {
    @if $breakpoint == "iphone" {
      @media (min-width: 320px) {
        @content;
      }
    }
  
    @else if $breakpoint == "mobile" {