feat: Add fomantic ui

assets/js/app.js

@@ -1,3 +1,4 @@
+import 'fomantic-ui-less/semantic.less';
 // 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.

assets/package.json

@@ -4,9 +4,11 @@
   "license": "MIT",
   "scripts": {
     "deploy": "webpack --mode production",
-    "watch": "webpack --mode development --watch"
+    "watch": "webpack --mode development --watch",
+    "preinstall": "npx npm-force-resolutions"
   },
   "dependencies": {
+    "gulp": "^4.0.2",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html"
   },
@@ -16,12 +18,22 @@
     "babel-loader": "^8.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
-    "sass-loader": "^8.0.2",
-    "node-sass": "^4.13.1",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^6.0.0",
+    "fomantic-ui-less": "^2.8.6",
+    "image-webpack-loader": "^6.0.0",
+    "less": "^3.11.3",
+    "less-loader": "^6.2.0",
     "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^2.3.2",
     "webpack": "4.41.5",
     "webpack-cli": "^3.3.2"
+  },
+  "resolutions": {
+    "graceful-fs": "4.2.3"
   }
 }

assets/webpack.config.js

@@ -5,6 +5,8 @@ const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
+const nodeModulesPath = path.resolve(__dirname, 'node_modules')
+
 module.exports = (env, options) => {
   const devMode = options.mode !== 'production';
 
@@ -26,6 +28,24 @@ module.exports = (env, options) => {
     devtool: devMode ? 'source-map' : undefined,
     module: {
       rules: [
+        // For images and fonts found in our scss files
+        {
+          test: /\.(jpg|jpeg|gif|png)$/,
+          use: [
+            'file-loader',
+            {
+              loader: 'image-webpack-loader',
+              options: {
+                disable: devMode,
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(woff2?|ttf|eot|svg)(\?[a-z0-9\=\.]+)?$/,
+          exclude: [nodeModulesPath],
+          loader: 'file-loader',
+        },
         {
           test: /\.js$/,
           exclude: /node_modules/,
@@ -40,12 +60,31 @@ module.exports = (env, options) => {
             'css-loader',
             'sass-loader',
           ],
-        }
+        },
+        {
+          test: /\.less$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            {loader: 'css-loader', options: {sourceMap: true}},
+            {
+              loader: 'less-loader',
+              options: {
+                sourceMap: true,
+              },
+            },
+          ],
+        },
       ]
     },
     plugins: [
       new MiniCssExtractPlugin({ filename: '../css/app.css' }),
       new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
-    ]
+    ],
+    resolve: {
+      alias: {
+        "../../theme.config$": path.join(__dirname, "/semantic-ui/theme.config"),
+        "../semantic-ui/site": path.join(__dirname, "/semantic-ui/site")
+      }
+    },
   }
 };