Discontinue usage of Sass

Author: shepmaster

ui/frontend/index.module.css

@@ -0,0 +1,47 @@
+:root {
+  --primary-font: 'Open Sans', sans-serif;
+  --rust: #a42;
+  --rust-dark: #80331a;
+  --border-color: #bbb;
+  --border: 1px solid var(--border-color);
+  --header-main-border: #dedede;
+  --header-transition: 0.2s ease-in-out;
+  --header-tint: #428bca;
+  --header-border-radius: 4px;
+  --header-accent-border: #bdbdbd;
+}
+
+/* Modify normalized styles */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: var(--primary-font);
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+body {
+  padding: 0 1em;
+  background-color: #e1e1db;
+  font-family: var(--primary-font);
+}
+
+:global(.language-rust_errors) {
+  & :global(.warning) {
+    color: #f79a06;
+  }
+
+  & :global(.error) {
+    color: #bf1b1b;
+  }
+}

ui/frontend/index.tsx

@@ -1,6 +1,9 @@
 import 'core-js';
 import 'regenerator-runtime/runtime';
 
+import 'normalize.css/normalize.css';
+import './index.module.css';
+
 import { merge } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';

ui/frontend/package.json

@@ -58,14 +58,12 @@
     "jest": "^26.0.0",
     "json-loader": "^0.5.4",
     "mini-css-extract-plugin": "^1.3.9",
-    "node-sass": "^5.0.0",
     "normalize.css": "^8.0.0",
     "postcss": "^8.2.7",
     "postcss-loader": "^5.0.0",
     "postcss-nesting": "^7.0.1",
     "postcss-simple-vars": "^6.0.3",
     "prettier": "2.2.1",
-    "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
     "stylelint": "^13.12.0",
     "stylelint-config-css-modules": "^2.2.0",

ui/frontend/webpack.config.js

@@ -45,9 +45,7 @@ module.exports = function(_, argv) {
          "[path][name]__[local]--[hash:base64]";
 
   return {
-    entry: {
-      app: ['./index.tsx', './index.scss'],
-    },
+    entry: './index.tsx',
 
     devtool,
 
@@ -83,20 +81,21 @@ module.exports = function(_, argv) {
           use: ['babel-loader', 'ts-loader'],
         },
         {
-          test: /\.scss$/,
+          test: /prismjs\/themes\/.*css$/,
+          type: 'asset/resource',
+        },
+        {
+          test: /\.css$/,
+          include: /node_modules/,
           use: [
             MiniCssExtractPlugin.loader,
             "css-loader",
             "postcss-loader",
-            "sass-loader",
           ],
         },
-        {
-          test: /prismjs\/themes\/.*css$/,
-          type: 'asset/resource',
-        },
         {
           test: /\.module.css$/,
+          exclude: /node_modules/,
           use: [
             MiniCssExtractPlugin.loader,
             {