Setup sass loader.

- Bump from alpine 3.10 to 3.11 to avoid compiling node-sass. It's important to avoid this as it decreased the build time to ~2 mintues :/. See sass/node-sass#2822 (comment) - CI: cache node modules using the github action cache.
rdok · Jan 22, 2020 · 361a682 · 361a682
1 parent 968bc83
commit 361a682
Show file tree

Hide file tree

Showing 9 changed files with 1,050 additions and 40 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -17,6 +17,15 @@ jobs:
 
     steps:
     - uses: actions/checkout@v1
+    - name: Cache node modules
+      uses: actions/cache@v1
+      with:
+        path: cache_node
+        key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-node-${{ env.cache-name }}-
+          ${{ runner.os }}-node-
+          ${{ runner.os }}-
     - name: Set env
       run: |
         echo ::set-env name=ID::$(id -u)
@@ -25,7 +34,7 @@ jobs:
       run: |
         docker-compose run --rm node yarn
         docker-compose run --rm node yarn run build
-    - name: Sync with S3
-      run: aws s3 sync ./public s3://training-apps-rdok/indecision --delete
-    - name: Create CloudFront invalidation
-      run: aws cloudfront create-invalidation  --distribution-id "${AWS_CLOUDFRONT_DISTRIBUTION_ID}" --paths /indecision/index.html /indecision/bundle.js
+#    - name: Sync with S3
+#      run: aws s3 sync ./public s3://training-apps-rdok/indecision --delete
+#    - name: Create CloudFront invalidation
+#      run: aws cloudfront create-invalidation  --distribution-id "${AWS_CLOUDFRONT_DISTRIBUTION_ID}" --paths /indecision/index.html /indecision/bundle.js
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+node_cache/
 public/
 !public/index.html
 

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -4,7 +4,7 @@ services:
 
   dev-server:
     restart: always
-    image: node:13-alpine3.10
+    image: node:13-alpine3.11
     command: yarn run dev-server
     user: "${UID}:${GID}"
     working_dir: /app
@@ -15,9 +15,11 @@ services:
 
   node:
     restart: always
-    image: node:13-alpine3.10
+    image: node:13-alpine3.11
     command: tail -f /dev/null
     user: "${UID}:${GID}"
     working_dir: /app
+    environment:
+      - YARN_CACHE_FOLDER=/app/node_cache/yarn
     volumes:
       - .:/app
diff --git a/package.json b/package.json
@@ -17,10 +17,14 @@
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-react": "^7.8.3",
     "babel-loader": "^8.0.6",
+    "css-loader": "^3.4.2",
     "live-server": "^1.2.1",
+    "node-sass": "^4.13.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-modal": "^3.11.1",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.1.3",
     "validator": "^12.1.0",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",

diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8"/>
     <title>Indecision</title>
+    <link rel="shortcut icon" href="./favicon.ico" />
 </head>
 <body>
 

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom'
+import './styles/styles.sass'
 
 import {App} from './app'
 

diff --git a/src/styles/styles.sass b/src/styles/styles.sass
@@ -0,0 +1,4 @@
+$brand-color: blue
+
+*
+  color: $brand-color
diff --git a/webpack.config.js b/webpack.config.js
@@ -8,11 +8,18 @@ module.exports = {
     },
     mode: 'development',
     module: {
-        rules: [{
-            loader: 'babel-loader',
-            test: /\.js$/,
-            exclude: /node_modules/
-        }]
+        rules: [
+            {
+                loader: 'babel-loader',
+                test: /\.js$/,
+                exclude: /node_modules/
+            },
+            {
+                use: ['style-loader', 'css-loader', 'sass-loader'],
+                test: /\.sass$/,
+                exclude: /node_modules/
+            }
+        ]
     },
     devtool: 'cheap-module-eval-source-map',
     devServer: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ @@
     <head>
         <meta charset="UTF-8"/>
         <title>Indecision</title>
+        <link rel="shortcut icon" href="./favicon.ico" />
     </head>
     <body>
@@ Expand Down @@