Live vs. Dev css compilation is problematic.

[mariacha]

Currently there's some code in the webpack to make your code run on local by looking at the dist_dev folder, but that file doesn't update if you use the npm run build command. This makes things confusing. We've stripped it out for a few projects now:

https://github.com/thinkshout/vhpa/pull/14/commits/34e4adfb7f89b24152175a812e768b99ec1a37cd

[miloskroulik]

It looks like the code you've referenced is not publicly accessible. Would it be possible to update docs regarding this issue?

[mariacha]

Here's the patch file between the two:

From 34e4adfb7f89b24152175a812e768b99ec1a37cd Mon Sep 17 00:00:00 2001
From: Jules <jules@thinkshout.com>
Date: Tue, 9 Jun 2020 11:28:46 -0700
Subject: [PATCH] #9 Fixes styles not compiling

Also deleted dist_dev, package-lock.json and node_modules files/directories and reran nmp install in the theme folder.
---
 web/themes/custom/ts_vhpa/ts_vhpa.theme     | 27 ---------------------
 web/themes/custom/ts_vhpa/webpack.config.js |  6 ++---
 2 files changed, 3 insertions(+), 30 deletions(-)

diff --git a/web/themes/custom/ts_vhpa/ts_vhpa.theme b/web/themes/custom/ts_vhpa/ts_vhpa.theme
index af759c3..e7b3cc6 100644
--- a/web/themes/custom/ts_vhpa/ts_vhpa.theme
+++ b/web/themes/custom/ts_vhpa/ts_vhpa.theme
@@ -38,22 +38,6 @@ function ts_vhpa_theme_suggestions_form_element_alter(array &$suggestions, array
 
 }
 
-/**
- * Implements hook_page_attachments_alter().
- */
-function ts_vhpa_page_attachments_alter(array &$page) {
-  // Tell IE to use latest rendering engine (not to use compatibility mode).
-  /*$ie_edge = [
-  '#type' => 'html_tag',
-  '#tag' => 'meta',
-  '#attributes' => [
-  'http-equiv' => 'X-UA-Compatible',
-  'content' => 'IE=edge',
-  ],
-  ];
-  $page['#attached']['html_head'][] = [$ie_edge, 'ie_edge'];*/
-}
-
 /**
  * Implements hook_preprocess_page() for page.html.twig.
  */
@@ -163,14 +147,3 @@ function ts_vhpa_theme_suggestions_details_alter(array &$suggestions, array $var
 function ts_vhpa_preprocess_menu_local_task(array &$variables) {
 
 }
-
-/**
- * Implements hook_page_attachments_alter().
- */
-function ts_vhpa_example_page_attachments_alter(array &$attachments) {
-  // Use the dev library if we're developing locally.
-  if (in_array('ts_grid/main', $attachments['#attached']['library']) && file_exists(__DIR__ . '/dist_dev')) {
-    $index = array_search('ts_grid/main', $attachments['#attached']['library']);
-    $attachments['#attached']['library'][$index] = 'ts_grid/dev';
-  }
-}
diff --git a/web/themes/custom/ts_vhpa/webpack.config.js b/web/themes/custom/ts_vhpa/webpack.config.js
index e0d315a..40e760d 100644
--- a/web/themes/custom/ts_vhpa/webpack.config.js
+++ b/web/themes/custom/ts_vhpa/webpack.config.js
@@ -37,7 +37,7 @@ module.exports = (env, argv) => {
               loader: "sass-loader",
               options: {
                 importer: globImporter(),
-                sourceMap: true,
+                sourceMap: true
               }
             }
           ]
@@ -55,7 +55,7 @@ module.exports = (env, argv) => {
       ]
     },
     output: {
-      path: isDevMode ? path.resolve(__dirname, "dist_dev") : path.resolve(__dirname, "dist"),
+      path: path.resolve(__dirname, "dist"),
       filename: "[name].min.js",
       publicPath: "/assets/"
     },

I think ultimately what we should do here is change ts_grid_example_page_attachments_alter to ts_vhpa_page_attachments_alter. Not sure why the ts_grid within this function doesn't get renamed when you run the install script ./update_theme_name.sh

[mariacha]

Related PR merged: #35