Merge pull request #125 from scout-ch/craco-with-sass

move from less to sass, move fonts to styling

I moved the commits configuring React from scratch, moving away from Create React App without ejecting, to it's separate branch as the overhead is not justifiable currently. For now, we can continue using craco with sass.

craco.config.js

@@ -1,15 +1,15 @@
 const CracoLessPlugin = require("craco-less");
 
-const emotionBabelPreset = require("@emotion/babel-preset-css-prop").default(
-  undefined,
-  {} // emotion preset options
-);
-
 module.exports = {
   plugins: [{ plugin: CracoLessPlugin }],
-  babel: {
-    plugins: [
-      ...emotionBabelPreset.plugins
-    ]
-  }
+  style: {
+    sass: {
+      loaderOptions: {
+        // Prefer 'sass' (dart-sass) over 'node-sass' if both packages are installed.
+        implementation: require('sass'),
+        // Workaround for this bug: https://github.com/webpack-contrib/sass-loader/issues/804
+        webpackImporter: false,
+      },
+    },
+  },
 };

package.json

@@ -8,7 +8,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
@@ -39,8 +38,8 @@
     "@types/react-helmet": "^6.1.6",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-router-hash-link": "^2.4.5",
-    "craco-less": "2.1.0-alpha.0",
     "react-scripts": "^5.0.1",
+    "sass": "^1.66.1",
     "serve": "^14.2.0"
   },
   "scripts": {