Make Typescript work out of the box

.gitignore

@@ -19,3 +19,6 @@
 
 # secrets
 secrets.*.js
+
+# editor configs
+/.vscode

package.json

@@ -17,9 +17,11 @@
     "@types/chrome": "0.0.132",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
+    "@types/webpack-env": "^1.16.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-hot-loader": "^4.13.0"
+    "react-hot-loader": "^4.13.0",
+    "sass": "^1.34.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.17",
@@ -43,7 +45,6 @@
     "fs-extra": "^9.1.0",
     "html-loader": "^2.1.0",
     "html-webpack-plugin": "^5.2.0",
-    "node-sass": "^4.14.1",
     "prettier": "^2.2.1",
     "sass-loader": "^11.0.1",
     "source-map-loader": "^2.0.1",

src/pages/Popup/Popup.jsx → src/pages/Popup/Popup.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import logo from '../../assets/img/logo.svg';
-import Greetings from '../../containers/Greetings/Greetings';
-import './Popup.css';
+import styles from './Popup.module.scss';
 
 const Popup = () => {
   return (

src/types.d.ts

@@ -0,0 +1,38 @@
+declare module '*.jpg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.jpeg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.gif' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.module.css' {
+  const value: { [key: string]: string };
+  export default value;
+}
+
+declare module '*.module.scss' {
+  const value: { [key: string]: string };
+  export default value;
+}
+declare module '*.module.sass' {
+  const value: { [key: string]: string };
+  export default value;
+}

webpack.config.js

@@ -36,13 +36,13 @@ if (fileSystem.existsSync(secretsPath)) {
 var options = {
   mode: process.env.NODE_ENV || 'development',
   entry: {
-    newtab: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.jsx'),
-    options: path.join(__dirname, 'src', 'pages', 'Options', 'index.jsx'),
-    popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'),
-    background: path.join(__dirname, 'src', 'pages', 'Background', 'index.js'),
-    contentScript: path.join(__dirname, 'src', 'pages', 'Content', 'index.js'),
-    devtools: path.join(__dirname, 'src', 'pages', 'Devtools', 'index.js'),
-    panel: path.join(__dirname, 'src', 'pages', 'Panel', 'index.jsx'),
+    newtab: path.join(__dirname, 'src', 'pages', 'Newtab'),
+    options: path.join(__dirname, 'src', 'pages', 'Options'),
+    popup: path.join(__dirname, 'src', 'pages', 'Popup'),
+    background: path.join(__dirname, 'src', 'pages', 'Background'),
+    contentScript: path.join(__dirname, 'src', 'pages', 'Content'),
+    devtools: path.join(__dirname, 'src', 'pages', 'Devtools'),
+    panel: path.join(__dirname, 'src', 'pages', 'Panel'),
   },
   chromeExtensionBoilerplate: {
     notHotReload: ['contentScript', 'devtools'],
@@ -105,7 +105,7 @@ var options = {
     alias: alias,
     extensions: fileExtensions
       .map((extension) => '.' + extension)
-      .concat(['.js', '.jsx', '.ts', '.tsx', '.css']),
+      .concat(['.js', '.jsx', '.ts', '.tsx', '.css', '.scss', '.sass']),
   },
   plugins: [
     new webpack.ProgressPlugin(),