Update: Set import alias

Todo.md

@@ -31,7 +31,7 @@
 -   [www.gunma-u.ac.jp](https://www.gunma-u.ac.jp/)
     -   [ ] 基本的な実装
 
-### 開発
+### その他
 
 -   [ ] [webpack-chrome-extension-reloader](https://www.npmjs.com/package/webpack-chrome-extension-reloader)でホットリロードに対応する
 -   [x] SCSSで直にスタイルを書き込んだ場合に無効化できない問題を修正する
@@ -41,3 +41,4 @@
 -   [ ] ドキュメントを書く
 -   [x] 設定を開いている間はポップアップを無効化する
 -   [ ] ポップアップでの設定変更後に手動でリロードする必要がある問題を修正する
+-   [ ] 設定の初期値を変更する

package.json

@@ -56,6 +56,7 @@
         "tailwindcss": "^3.3.5",
         "ts-loader": "^9.5.0",
         "ts-node": "^10.9.1",
+        "tsconfig-paths-webpack-plugin": "^4.1.0",
         "typescript": "^5.2.2",
         "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4",

src/options/index.tsx

@@ -1,6 +1,6 @@
-import "/styles/popup.css";
-import "/styles/tailwind.css";
-import "/styles/gaming.scss";
+import "@/styles/popup.css";
+import "@/styles/tailwind.css";
+import "@/styles/gaming.scss";
 
 import { createRoot } from "react-dom/client";
 import { HashRouter } from "react-router-dom";

src/popup/index.tsx

@@ -1,6 +1,6 @@
-import "/styles/popup.css";
-import "/styles/tailwind.css";
-import "/styles/gaming.scss";
+import "@/styles/popup.css";
+import "@/styles/tailwind.css";
+import "@/styles/gaming.scss";
 
 import { createRoot } from "react-dom/client";
 

src/scripts/background.ts

@@ -1,6 +1,6 @@
-import StorageTool from "../class/StorageTool";
-import isTrue from "../utils/isTrue";
-import OpenOptions from "../utils/openOptions";
+import StorageTool from "@/class/StorageTool";
+import isTrue from "@/utils/isTrue";
+import OpenOptions from "@/utils/openOptions";
 
 chrome.runtime.onInstalled.addListener(async () => {
     const storage = new StorageTool("other");

src/scripts/content_common.ts

@@ -1,5 +1,5 @@
-import "/styles/gaming.scss";
-import "/styles/darkmode.scss";
+import "@/styles/gaming.scss";
+import "@/styles/darkmode.scss";
 
 chrome.runtime.onMessage.addListener((message) => {
     if (message === "reload") {

src/scripts/content_kyomu.ts

@@ -1,4 +1,4 @@
-import "/styles/kyomu.css";
+import "@/styles/kyomu.css";
 
 import { Kyomu } from "../class";
 import LoadGamingWebsite from "../utils/loadGamingWebsite";

src/scripts/content_media.ts

@@ -1,4 +1,4 @@
-import "/styles/media.css";
+import "@/styles/media.css";
 
 import { Media } from "../class";
 import loadGamingWebsite from "../utils/loadGamingWebsite";

src/scripts/content_moodle.ts

@@ -1,4 +1,4 @@
-import "/styles/moodle.scss";
+import "@/styles/moodle.scss";
 
 import { Moodle } from "../class";
 import loadGamingWebsite from "../utils/loadGamingWebsite";

src/scripts/content_mylib.ts

@@ -1,4 +1,4 @@
-import "/styles/mylibrary.css";
+import "@/styles/mylibrary.css";
 
 import { MyLibrary } from "../class";
 import LoadGamingWebsite from "../utils/loadGamingWebsite";

src/scripts/content_sso.ts

@@ -1,4 +1,4 @@
-import "/styles/sso.css";
+import "@/styles/sso.scss";
 
 import { SSO } from "../class";
 import loadGamingWebsite from "../utils/loadGamingWebsite";

src/styles/sso.scss

@@ -0,0 +1,16 @@
+[data-gaming_gundai="true"] {
+    .header_column,
+    .input_column,
+    .input_form th,
+    #username_id_input,
+    #password_input {
+        background: transparent !important;
+    }
+
+    #username_id_input,
+    #password_input {
+        border: 1px solid #ccc !important;
+        border-radius: 5px !important;
+        padding: 5px !important;
+    }
+}

tsconfig.json

@@ -5,6 +5,10 @@
         "outDir": "dist",
         "strict": true,
         "jsx": "react-jsx",
-        "esModuleInterop": true
+        "esModuleInterop": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"]
+        }
     }
 }

webpack.common.js

@@ -4,6 +4,7 @@ const ESLintPlugin = require("eslint-webpack-plugin");
 const fs = require("fs");
 const HtmlPlugin = require("html-webpack-plugin");
 const path = require("path");
+const { TsconfigPathsPlugin } = require("tsconfig-paths-webpack-plugin");
 
 const loadFilesInScripts = function () {
     const dir = path.join(__dirname, "src/scripts");
@@ -31,6 +32,10 @@ module.exports = {
     resolve: {
         extensions: [".ts", ".tsx", ".js", ".jsx"],
         roots: [path.resolve(__dirname, "node_modules"), path.resolve(__dirname, "src")],
+        plugins: [new TsconfigPathsPlugin({ configFile: path.resolve(__dirname, "tsconfig.json") })],
+        alias: {
+            "@": path.resolve(__dirname, "src"),
+        },
     },
 
     module: {