move layout to components, change scss to css

src/components/Counter/Counter.scss → src/components/Counter/Counter.css

@@ -1,3 +1,5 @@
+@import '../variables.css';
+
 .counter {
   font-weight: bold;
 }

src/components/Counter/Counter.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import classes from './Counter.scss'
+import classes from './Counter.css'
 
 export const Counter = (props) => (
   <div>

src/components/Header/Header.scss → src/components/Header/Header.css

@@ -1,3 +1,5 @@
+@import '../variables.css';
+
 .activeRoute {
   font-weight: bold;
   text-decoration: underline;

src/components/Header/Header.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { IndexLink, Link } from 'react-router'
-import classes from './Header.scss'
+import classes from './Header.css'
 
 export const Header = () => (
   <div>

src/components/Layout/Layout.css

@@ -0,0 +1,9 @@
+@import '../variables.css';
+
+body {
+  font-family: var(--font-base);
+}
+
+.mainContainer {
+  padding-top:20px;
+}

src/layouts/CoreLayout/CoreLayout.js → src/components/Layout/Layout.js

@@ -1,7 +1,6 @@
 import React from 'react'
-import Header from '../../components/Header'
-import classes from './CoreLayout.scss'
-import '../../styles/core.scss'
+import Header from '../Header'
+import classes from './Layout.css'
 
 export const CoreLayout = ({ children }) => (
   <div className='container text-center'>

src/components/Layout/index.js

@@ -0,0 +1,3 @@
+import Layout from './Layout'
+
+export default Layout

src/components/variables.css

@@ -0,0 +1,8 @@
+:root {
+  --font-base : 'sans-serif';
+}
+
+html, body {
+	margin: 0px;
+	padding: 0px;
+}

src/layouts/CoreLayout/CoreLayout.scss

@@ -1,3 +0,0 @@
-.mainContainer {
-  padding-top:20px;
-}

src/layouts/CoreLayout/index.js

@@ -1,3 +0,0 @@
-import CoreLayout from './CoreLayout'
-
-export default CoreLayout

src/routes/home/components/HomeView.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import DuckImage from '../assets/Duck.jpg'
-import classes from './HomeView.scss'
+import classes from './HomeView.css'
 
 export const HomeView = () => (
   <div>

src/routes/index.js

@@ -1,5 +1,5 @@
 // We only need to import the modules necessary for initial render
-import CoreLayout from '../layouts/CoreLayout'
+import Layout from '../components/Layout'
 import Home from './Home'
 import CounterRoute from './Counter'
 
@@ -8,7 +8,7 @@ import CounterRoute from './Counter'
 
 export const createRoutes = (store) => ({
   path: '/',
-  component: CoreLayout,
+  component: Layout,
   indexRoute: Home,
   childRoutes: [
     CounterRoute(store)

src/styles/_base.scss

@@ -1,12 +0,0 @@
-/*
-Application Settings Go Here
-------------------------------------
-This file acts as a bundler for all variables/mixins/themes, so they
-can easily be swapped out without `core.scss` ever having to know.
-
-For example:
-
-@import './variables/colors';
-@import './variables/components';
-@import './themes/default';
-*/

src/styles/core.scss

@@ -1,21 +0,0 @@
-:global {
-  @import 'base';
-
-  // Some best-practice CSS that's useful for most apps
-  // Just remove them if they're not what you want
-  html {
-    box-sizing: border-box;
-  }
-
-  html,
-  body {
-    margin: 0;
-    padding: 0;
-  }
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-  }
-}

tools/webpack.config.js

@@ -129,14 +129,7 @@ const config = {
         test: /\.scss$/,
         loaders: [
           'style-loader',
-          `css-loader?${JSON.stringify({
-            sourceMap: DEBUG,
-            // CSS Modules https://github.com/css-modules/css-modules
-            modules: true,
-            localIdentName: DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
-            // CSS Nano http://cssnano.co/options/
-            minimize: !DEBUG,
-          })}`,
+          `css-loader?${JSON.stringify({ sourceMap: DEBUG, minimize: !DEBUG })}`,
           'postcss-loader?pack=sass',
           'sass-loader',
         ],
@@ -147,11 +140,18 @@ const config = {
       },
       {
         test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
-        loader: 'url-loader?limit=10000',
+        loader: 'url-loader',
+        query: {
+          name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
+          limit: 10000,
+        },
       },
       {
         test: /\.(eot|ttf|wav|mp3)$/,
         loader: 'file-loader',
+        query: {
+          name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
+        },
       },
     ]
   },