no longer bundle css files within js files

lib/Controller/MainController.php

@@ -54,7 +54,7 @@ class MainController extends Controller
         // $str = \OC::$server->getDatabaseConnection()->getInner()->getPrefix();
         //$config = \OC::$server->getAppConfig();
         OC_Util::addScript($this->appName, 'app');
-        // OC_Util::addStyle($this->appName, 'table');
+        OC_Util::addStyle($this->appName, 'app');
         $params = $this->buildParams();
         $response = new TemplateResponse($this->appName, 'Index', $params);
         return $response;

package.json

@@ -68,6 +68,7 @@
 		"vue-loader": "^16.0.0-beta.10",
 		"vue-svg-loader": "^0.17.0-beta.2",
 		"webpack": "^5.69.0",
-		"webpack-cli": "^4.9.0"
+		"webpack-cli": "^4.9.0",
+		"mini-css-extract-plugin": "^2.6.0"
 	}
-}
+}

src/components/folderSettings.vue

@@ -7,7 +7,6 @@
   ></div>
 </template>
 <script>
-import Http from "../lib/http";
 import helper from "../utils/helper";
 
 export default {

templates/settings/Admin.php

@@ -1,6 +1,6 @@
 <?php
 script("ncdownloader", 'appSettings');
-style("ncdownloader", "settings");
+style("ncdownloader", 'appSettings');
 extract($_);
 ?>
 <div class="ncdownloader-admin-settings">

templates/settings/Personal.php

@@ -1,7 +1,6 @@
 <?php
 script("ncdownloader", 'appSettings');
-style("ncdownloader", "autocomplete");
-style("ncdownloader", "settings");
+style("ncdownloader", 'appSettings');
 extract($_);
 $time_map = array('i' => 'minutes', 'h' => 'hours', 'w' => 'weeks', 'd' => 'days', 'y' => 'years');
 ?>

webpack.app.js

@@ -1,12 +1,13 @@
 const path = require('path');
 const webpack = require('webpack');
 const { VueLoaderPlugin } = require('vue-loader')
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 
 module.exports = {
- /* experiments: {
-    asset: true
-  },*/
+  /* experiments: {
+     asset: true
+   },*/
   entry: {
     app: './src/index.js',
     appSettings: './src/settings.js'
@@ -31,8 +32,10 @@ module.exports = {
       {
         test: /\.s?[ac]ss$/i,
         use: [
+          //Create standalone css files
+          MiniCssExtractPlugin.loader,
           // Creates `style` nodes from JS strings
-          "style-loader",
+          // "style-loader",
           // Translates CSS into CommonJS
           "css-loader",
           // Compiles Sass to CSS
@@ -49,11 +52,11 @@ module.exports = {
         use: 'vue-loader'
       },
       /*{ test: /\.css$/, use: ['vue-style-loader', 'css-loader'] },*/
-        {
-          test: /\.tsx?$/,
-          use: 'ts-loader',
-          exclude: /node_modules/,
-        },
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
     ]
   },
   resolve: {
@@ -77,6 +80,9 @@ module.exports = {
       jquery: "jQuery",
       "window.jQuery": "jquery"
     }),
+    new MiniCssExtractPlugin({
+      filename: '../css/[name].css',
+    }),
   ],
   externals: {
     jquery: 'jQuery',