Load the styles in dev.

canonical · Jun 3, 2020 · 3f58992 · 3f58992
1 parent 2656069
commit 3f58992
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 14 deletions.
diff --git a/legacy/webpack.common.js b/legacy/webpack.common.js
@@ -67,10 +67,6 @@ module.exports = {
     new CopyWebpackPlugin([
       { from: path.resolve(__dirname, "./src/assets"), to: "assets" },
     ]),
-    new MiniCssExtractPlugin({
-      // This file is relative to output.path above.
-      filename: "assets/css/[name].[contenthash].css",
-    }),
     new webpack.ProvidePlugin({
       "window.jQuery": "jquery",
     }),

diff --git a/legacy/webpack.dev.js b/legacy/webpack.dev.js
@@ -1,4 +1,5 @@
 const merge = require("webpack-merge");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const path = require("path");
 
 const common = require("./webpack.common.js");
@@ -14,4 +15,9 @@ module.exports = merge(common, {
     writeToDisk: true,
   },
   devtool: "eval-source-map",
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "assets/css/[name].css",
+    }),
+  ],
 });
diff --git a/legacy/webpack.prod.js b/legacy/webpack.prod.js
@@ -1,5 +1,6 @@
 const merge = require("webpack-merge");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 
 const common = require("./webpack.common.js");
@@ -10,5 +11,10 @@ module.exports = merge(common, {
   optimization: {
     minimizer: [new OptimizeCSSAssetsPlugin({})],
   },
-  plugins: [new CleanWebpackPlugin()],
+  plugins: [
+    new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: "assets/css/[name].[contenthash].css",
+    }),
+  ],
 });
diff --git a/root/src/root-application.js b/root/src/root-application.js
@@ -16,15 +16,19 @@ window.addEventListener("single-spa:before-app-change", (evt) => {
   } = evt.detail.newAppStatuses;
   const uiStylesheet = document.querySelector(".ui-stylesheet");
   const legacyStylesheet = document.querySelector(".legacy-stylesheet");
-  if (ui === "MOUNTED") {
-    uiStylesheet.disabled = false;
-  } else {
-    uiStylesheet.disabled = true;
+  if (uiStylesheet) {
+    if (ui === "MOUNTED") {
+      uiStylesheet.disabled = false;
+    } else {
+      uiStylesheet.disabled = true;
+    }
   }
-  if (legacy === "MOUNTED") {
-    legacyStylesheet.disabled = false;
-  } else {
-    legacyStylesheet.disabled = true;
+  if (legacyStylesheet) {
+    if (legacy === "MOUNTED") {
+      legacyStylesheet.disabled = false;
+    } else {
+      legacyStylesheet.disabled = true;
+    }
   }
 });
 

diff --git a/root/webpack.dev.js b/root/webpack.dev.js
@@ -16,7 +16,9 @@ module.exports = merge(common, {
       template: path.resolve(__dirname, "src", "index.ejs"),
       inject: false,
       templateParameters: {
+        legacyStylesheet: `/MAAS/assets/css/maas.css`,
         publicPath,
+        uiStylesheet: null,
       },
     }),
   ],

diff --git a/root/webpack.prod.js b/root/webpack.prod.js
@@ -10,7 +10,10 @@ const publicPath = "/MAAS/r/";
 
 const getStylesheet = (dir) => {
   const outputPath = path.resolve(process.cwd(), dir);
-  return fs.readdirSync(outputPath).find((file) => file.endsWith(".css"));
+  const stylesheet = fs
+    .readdirSync(outputPath)
+    .find((file) => file.endsWith(".css"));
+  return `${publicPath}assets/css/${stylesheet}`;
 };
 
 module.exports = merge(common, {