Improve webpack config

package.json

@@ -10,6 +10,7 @@
 		"clean-webpack-plugin": "^3.0.0",
 		"copy-webpack-plugin": "^6.0.3",
 		"css-loader": "^4.0.0",
+		"file-loader": "^6.0.0",
 		"html-loader": "^1.1.0",
 		"html-webpack-plugin": "4.3.0",
 		"husky": ">=4",

src/content_script/custom_elements.ts

@@ -1,4 +1,4 @@
-import spinnerCSS from "./spinner.raw.scss";
+import spinnerCSS from "./spinner.scss?file";
 
 export class LingoLoading extends HTMLElement {
 	constructor() {
@@ -8,7 +8,9 @@ export class LingoLoading extends HTMLElement {
 		let spinner = document.createElement("div");
 		spinner.id = "spinner";
 
-		const style = document.createElement("style");
+		const style = document.createElement("link");
+		style.rel = "stylesheet";
+		style.href = spinnerCSS;
 		style.textContent = spinnerCSS;
 		shadow.appendChild(style);
 		shadow.appendChild(spinner);

src/types.d.ts

@@ -1,6 +1,6 @@
-declare module "*.raw.scss" {
-	const css: string;
-	export = css;
+declare module "*?file" {
+	const file: string;
+	export = file;
 }
 
 declare const enum commands {

webpack.config.js

@@ -36,17 +36,28 @@ let options = {
 			},
 			{
 				test: /\.tsx?$/,
-				use: "ts-loader",
+				oneOf: [
+					{
+						resourceQuery: /file/,
+						use: ["ts-loader", "file-loader"],
+					},
+					{
+						use: "ts-loader",
+					},
+				],
 				exclude: /node_modules/,
 			},
 			{
 				test: /\.(c|s[ac])ss$/i,
-				exclude: /\.raw\.(c|s[ac])ss$/i,
-				use: ["style-loader", "css-loader", "sass-loader"],
-			},
-			{
-				test: /\.raw\.(c|s[ac])ss$/i,
-				use: ["raw-loader", "sass-loader"],
+				oneOf: [
+					{
+						resourceQuery: /file/,
+						use: ["file-loader", "css-loader", "sass-loader"],
+					},
+					{
+						use: ["style-loader", "css-loader", "sass-loader"],
+					},
+				],
 			},
 		],
 	},

yarn.lock

@@ -2463,6 +2463,14 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
+file-loader@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.0.0.tgz#97bbfaab7a2460c07bcbd72d3a6922407f67649f"
+  integrity sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.5"
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"