Use style-loader for CSS imports

deansheather · deansheather · commit 845ff1247022 · 2019-08-03T12:20:04.000+10:00
diff --git a/extension/package.json b/extension/package.json
@@ -13,6 +13,7 @@
 		"mini-css-extract-plugin": "^0.8.0",
 		"node-sass": "^4.12.0",
 		"sass-loader": "^7.1.0",
+		"style-loader": "^0.23.1",
 		"ts-loader": "^5.3.3",
 		"typescript": "^3.4.4",
 		"webpack": "^4.30.0",
diff --git a/extension/src/config.html b/extension/src/config.html
@@ -3,7 +3,6 @@
 <head>
 	<meta charset="UTF-8">
 	<title>Sail Extension</title>
-	<link rel="stylesheet" href="./config.css">
 </head>
 
 <body>
@@ -47,7 +46,7 @@ <h2>Approved Hosts</h2>
 
 			<tbody id="approved-hosts-entries">
 				<tr>
-					<td>Loading entries...</td>
+					<td colspan="2">Loading entries...</td>
 				</tr>
 
 				<!--
diff --git a/extension/src/config.ts b/extension/src/config.ts
@@ -4,6 +4,7 @@ import {
 	setApprovedHosts,
 	addApprovedHost
 } from "./common";
+import "./config.scss";
 
 const sailStatus = document.getElementById("sail-status");
 const sailAvailableStatus = document.getElementById("sail-available-status");
@@ -93,6 +94,7 @@ const reloadApprovedHostsTable = (): Promise<String[]> => {
 				// No approved hosts.
 				const tr = document.createElement("tr");
 				const td = document.createElement("td");
+				td.colSpan = 2;
 				td.innerText = "No approved host entries found.";
 				tr.appendChild(td);
 				approvedHostsEntries.appendChild(tr);
diff --git a/extension/webpack.config.js b/extension/webpack.config.js
@@ -1,6 +1,5 @@
 const path = require("path");
 const HappyPack = require("happypack");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const os = require("os");
 const CopyPlugin = require("copy-webpack-plugin");
 const outDir = path.join(__dirname, "out");
@@ -14,8 +13,7 @@ const mainConfig = (plugins = []) => ({
 			{
 				test: /\.scss$/,
 				use: [
-					//process.env.NODE_ENV !== "production" ? "style-loader" : MiniCssExtractPlugin.loader,
-					MiniCssExtractPlugin.loader,
+					"style-loader",
 					"css-loader",
 					"sass-loader",
 				],
@@ -89,17 +87,4 @@ module.exports = [
 			filename: "config.js",
 		},
 	},
-	{
-		...mainConfig([
-			new MiniCssExtractPlugin({
-				filename: "config.css",
-				chunkFilename: "config.css"
-			}),
-		]),
-		entry: path.join(__dirname, "src", "config.scss"),
-		output: {
-			path: outDir,
-			filename: "config.css.js",
-		},
-	},
 ];
