[TASK] Compile css (#103)

Build/Vue/package.json

@@ -1,10 +1,11 @@
 {
-  "name": "vue-testing2",
+  "name": "typo3-filelist",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "build": "vue-cli-service build",
     "build-lib": "vue-cli-service build --target lib --name filelist ./src/main.ts",
+    "config-inspect": "vue-cli-service inspect",
     "lint": "vue-cli-service lint",
     "test:e2e": "vue-cli-service test:e2e",
     "test:unit": "vue-cli-service test:unit",

Build/Vue/src/main.ts

@@ -1,3 +1,5 @@
+import './styles/index.scss';
+
 import Vue from 'vue';
 import App from './App';
 import store from './store/store';

Build/Vue/src/styles/index.scss

@@ -0,0 +1 @@
+@import "modules/clean-me";

Build/Vue/vue.config.js

@@ -1,26 +1,31 @@
 const path = require("path");
 
 module.exports = {
-  outputDir: path.resolve(__dirname, "../../Resources/Public/JavaScript/Library/"),
-  configureWebpack: {
-    devServer: {
-      headers: {
-        'Access-Control-Allow-Origin': '*',
-        'Access-Control-Allow-Headers': '*',
-      },
+    outputDir: path.resolve(__dirname, "../../Resources/Public/JavaScript/Library/"),
+    productionSourceMap: false,
+    filenameHashing: false,
+    css: {
+        extract: true,
     },
-    externals: [
-      {
-        // Object
-        vue$: {
-          commonjs: 'Vue',
-          amd: 'Vue',
-          root: 'Vue' // indicates global variable
+    configureWebpack: {
+        devServer: {
+            headers: {
+                'Access-Control-Allow-Origin': '*',
+                'Access-Control-Allow-Headers': '*',
+            },
         },
-      },
-      'TYPO3/CMS/Backend/Icons',
-      'TYPO3/CMS/Backend/Modal',
-      'moment'
-    ],
-  }
+        externals: [
+            {
+                // Object
+                vue$: {
+                    commonjs: 'Vue',
+                    amd: 'Vue',
+                    root: 'Vue' // indicates global variable
+                },
+            },
+            'TYPO3/CMS/Backend/Icons',
+            'TYPO3/CMS/Backend/Modal',
+            'moment'
+        ],
+    }
 };

Classes/Controller/DigitalAssetManagementController.php

@@ -72,7 +72,7 @@ public function handleRequest(ServerRequestInterface $request): ResponseInterfac
         $pageRenderer = $this->moduleTemplate->getPageRenderer();
         $pageRenderer->loadRequireJsModule('TYPO3/CMS/DigitalAssetManagement/DigitalAssetManagementActions');
         $pageRenderer->addCssFile('EXT:backend/Resources/Public/Css/backend.css');
-        $pageRenderer->addCssFile('EXT:digital_asset_management/Build/Vue/public/app.css');
+        $pageRenderer->addCssFile('EXT:digital_asset_management/Resources/Public/JavaScript/Library/filelist.css');
         $pageRenderer->addInlineLanguageLabelFile('EXT:digital_asset_management/Resources/Private/Language/locallang_mod.xlf');
         $pageRenderer->addInlineLanguageLabelFile('EXT:digital_asset_management/Resources/Private/Language/locallang_vue.xlf');
         $pageRenderer->addInlineLanguageLabelFile('EXT:core/Resources/Private/Language/locallang_core.xlf', 'file_upload');