vue-loader tweaks, part 1

package.json

@@ -290,6 +290,7 @@
     "vue-loader": "^15.9.2",
     "vue-prism-editor": "^0.6.1",
     "vue-router": "^3.3.2",
+    "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
     "vuedraggable": "^2.23.2",
     "vuex": "^3.4.0",

src/renderer/_vue/assets/css/app.scss

@@ -1,8 +1,8 @@
-
 @import 'custom';
-@import 'fonts';
+@import "~typeface-roboto/index.css";
-@import '../../../../../node_modules/bootstrap/scss/bootstrap';
+@import "~material-design-icons/iconfont/material-icons.css";
-@import '../../../../../node_modules/bootstrap-vue/src/index';
+@import '~bootstrap/scss/bootstrap';
+@import '~bootstrap-vue/src/index';
 
 html, body {
   margin: 0;

src/renderer/_vue/assets/css/fonts.scss

@@ -1,2 +0,0 @@
-@import "../../../../../node_modules/typeface-roboto/index.css";
-@import "../../../../../node_modules/material-design-icons/iconfont/material-icons.css";

src/renderer/components/fonts.scss

@@ -1,6 +1,6 @@
 // Custom fonts
-@import "../../../node_modules/material-design-icons/iconfont/material-icons.css";
+@import "~material-design-icons/iconfont/material-icons.css";
-@import "../../../node_modules/typeface-roboto/index.css";
+@import "~typeface-roboto/index.css";
 
 // Patched RobotoMono font with icons
 // RobotoMono Windows Compatible for using in terminal

src/renderer/components/media.scss

@@ -1,5 +1,5 @@
 //-- Mixins for adaptive layout (media queries)
-@import "../../../node_modules/include-media/dist/include-media";
+@import "~include-media/dist/include-media";
 
 @mixin mobile {
   @include media("<=desktop") {

src/renderer/index.tsx

@@ -1,6 +1,6 @@
 // Renderer process
 
 import "../common/system-ca"
-import { App } from "./components/app";
+import { appInitVue } from "./_vue";
 
-App.init();
+appInitVue();

webpack.renderer.ts

@@ -7,6 +7,7 @@ import { isDevelopment, isProduction, outDir, rendererDir } from "./src/common/v
 import { libraryTarget, manifestPath } from "./webpack.dll";
 
 export default function (): webpack.Configuration {
+  const VueLoaderPlugin = require("vue-loader/lib/plugin");
   const htmlTemplate = path.resolve(rendererDir, "index.html");
   const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
   const tsConfigFile = path.resolve("tsconfig.json");
@@ -26,9 +27,13 @@ export default function (): webpack.Configuration {
       chunkFilename: 'chunks/[name].js',
     },
     resolve: {
+      alias: {
+        "@": rendererDir,
+      },
       extensions: [
         '.js', '.jsx', '.json',
-        '.ts', '.tsx', '.vue'
+        '.ts', '.tsx',
+        '.vue',
       ]
     },
     optimization: {
@@ -54,15 +59,20 @@ export default function (): webpack.Configuration {
           test: /\.node$/,
           use: "node-loader"
         },
+        {
+          test: /\.jsx?$/,
+          use: "babel-loader"
+        },
         {
           test: /\.tsx?$/,
+          exclude: /node_modules/,
           use: [
             "babel-loader",
             {
               loader: "ts-loader",
               options: {
                 // transpileOnly: false,
-                // appendTsSuffixTo: [/\.vue$/], // todo: remove after migration vue parts
+                // appendTsSuffixTo: [/\.vue$/],
                 configFile: tsConfigFile,
                 compilerOptions: {
                   // localization support
@@ -74,6 +84,19 @@ export default function (): webpack.Configuration {
             }
           ]
         },
+        {
+          test: /\.vue$/,
+          use: {
+            loader: "vue-loader",
+            options: {
+              shadowMode: false,
+              loaders: {
+                sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax=1",
+                scss: "vue-style-loader!css-loader!sass-loader",
+              }
+            }
+          }
+        },
         {
           test: /\.(jpg|png|svg|map|ico)$/,
           use: 'file-loader?name=assets/[name]-[hash:6].[ext]'
@@ -110,6 +133,8 @@ export default function (): webpack.Configuration {
     },
 
     plugins: [
+      new VueLoaderPlugin(), // todo: remove with _"vue/*"
+
       // todo: check if this actually works in mode=production files
       new webpack.DllReferencePlugin({
         context: process.cwd(),

yarn.lock

@@ -11249,7 +11249,7 @@ vue-router@^3.3.2:
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.3.2.tgz#0099de402edb2fe92f9711053ab5a2156f239cad"
   integrity sha512-5sEbcfb7MW8mY8lbUVbF4kgcipGXsagkM/X+pb6n0MhjP+RorWIUTPAPSqgPaiPOxVCXgAItBl8Vwz8vq78faA==
 
-vue-style-loader@^4.1.0:
+vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
   integrity sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ==