Add Sass CSS

apps/fg_http/assets/css/app.scss

@@ -1,3 +1,4 @@
 /* This file is for your main application css. */
 
-@import "./main.css";
+@import "./main.scss";
+@import "./email.scss";

apps/fg_http/assets/css/email.css

@@ -1 +0,0 @@
-/* Email styles */

apps/fg_http/assets/css/email.scss

@@ -0,0 +1 @@
+/* Email Styles */

apps/fg_http/assets/css/main.scss

@@ -0,0 +1 @@
+/* Main Styles */

apps/fg_http/assets/js/app.js

@@ -1,7 +1,7 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-import css from "../css/app.css"
+import css from "../css/app.scss"
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured

apps/fg_http/assets/package.json

@@ -14,11 +14,16 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
+    "autoprefixer": "^9.8.4",
     "babel-loader": "^8.1.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.5.2",
     "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.14.1",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "postcss": "^7.0.32",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^8.0.2",
     "terser-webpack-plugin": "^2.3.5",
     "webpack": "4.41.5",
     "webpack-cli": "^3.3.11"

apps/fg_http/assets/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer'),
+  ]
+}

apps/fg_http/assets/webpack.config.js

@@ -36,7 +36,23 @@ module.exports = (env, options) => ({
       },
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader']
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: 'css-loader', options: { }},
+          'postcss-loader'
+        ]
+      },
+      {
+        test: /\.sass$|\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: { },
+          },
+          { loader: 'postcss-loader' },
+          { loader: 'sass-loader' }
+        ]
       }
     ]
   },