fix compilation problem

Author: Francesca-Bit

package-lock.json

@@ -68,12 +68,16 @@
     "@babel/runtime": "^7.6.3",
     "babel-loader": "^8.0.0",
     "cross-env": "^7.0.3",
+    "css-loader": "^6.7.3",
     "dotenv-webpack": "^7.1.0",
     "eslint": "^8.8.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.0",
     "eslint-plugin-react": "^7.16.0",
+    "file-loader": "^6.2.0",
+    "less-loader": "^11.1.0",
+    "mini-css-extract-plugin": "^2.7.2",
     "pre-commit": "^1.1.3",
     "react-hot-loader": "^1.3.0",
     "react-router-dom": "^5.1.2",

packages/tdb-access-control-component/package.json

@@ -1,7 +1,9 @@
 const path = require('path');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = (env, argv) => ({
-    entry: './src/index.js',
+  plugins: [new MiniCssExtractPlugin()],  
+  entry: './src/index.js',
     module: {
         rules: [
             {
@@ -21,6 +23,53 @@ module.exports = (env, argv) => ({
         sourceMapFilename: 'terminusdb-access-control-component.min.js.map',
         library: 'TerminusDBAccessControl',
     },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader:"babel-loader",
+            options:{
+              presets: [
+                ["@babel/preset-env"],
+                "@babel/preset-react"
+              ],
+            }
+          },
+        },
+        {
+          test: /\.(css|less)$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader', 'less-loader'
+          ],
+        },
+        {
+          test: /\.(svg|jpg|gif|png)$/,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                name: 'assets/images/[name].[ext]',
+              }
+            }
+          ]
+        },
+        {
+          test: /\.(woff|woff2|eot|ttf|otf)$/,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                outputPath: (url, resourcePath, context) => {
+                  return `assets/fonts/${path.basename(resourcePath)}`;
+                }
+              }
+            }
+          ]
+        }]
+      },
     externals: {
 
     react: {