add less. some restructering.

fnmeissner · Feb 2, 2018 · ac0afc3 · ac0afc3
1 parent f0ef3d5
commit ac0afc3
Show file tree

Hide file tree

Showing 12 changed files with 750 additions and 22 deletions.
diff --git a/components/app/app.less b/components/app/app.less
@@ -0,0 +1,3 @@
+.app-component {
+  font-weight: bold;
+}
diff --git a/components/app.tsx → components/app/app.tsx b/components/app.tsx → components/app/app.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
-import {HeaderComponent} from "./header";
-import {SidebarComponent} from "./sidebar";
-import {ContentComponent} from "./content";
+import {HeaderComponent} from "../header/header";
+import {SidebarComponent} from "../sidebar/sidebar";
+import {ContentComponent} from "../content/content";
 
 export class AppComponent extends React.Component {
     render() {

diff --git a/components/components.less b/components/components.less
@@ -0,0 +1 @@
+@import "./app/app";
diff --git a/components/content.tsx → components/content/content.tsx b/components/content.tsx → components/content/content.tsx
diff --git a/components/header.tsx → components/header/header.tsx b/components/header.tsx → components/header/header.tsx
diff --git a/components/sidebar.tsx → components/sidebar/sidebar.tsx b/components/sidebar.tsx → components/sidebar/sidebar.tsx
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <html>
 
 <head>
-	<title></title>
+	<title>React Tutorial</title>
 </head>
 
 <body>

diff --git a/index.tsx b/index.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import {AppComponent} from "./components/app";
+import {AppComponent} from "./components/app/app";
 
 ReactDOM.render(
     <AppComponent/>,

diff --git a/package.json b/package.json
@@ -19,8 +19,12 @@
   "devDependencies": {
     "@types/react": "^16.0.36",
     "@types/react-dom": "^16.0.3",
+    "css-loader": "^0.28.9",
     "html-webpack-plugin": "^2.30.1",
-    "webpack-dev-server": "^2.11.1",
-    "ts-loader": "^3.4.0"
+    "less": "^2.7.3",
+    "less-loader": "^4.0.5",
+    "style-loader": "^0.20.1",
+    "ts-loader": "^3.4.0",
+    "webpack-dev-server": "^2.11.1"
   }
 }
diff --git a/style/style.less b/style/style.less
@@ -0,0 +1 @@
+@import "../components/components";
diff --git a/webpack.config.js b/webpack.config.js
@@ -4,8 +4,8 @@ const HtmlPlugin = require("html-webpack-plugin");
 
 module.exports = {
     entry: [
-        path.join(__dirname, "index.tsx")
-        //path.join(__dirname, "src/style/style.less")
+        path.join(__dirname, "index.tsx"),
+        path.join(__dirname, "style/style.less")
     ],
     output: {
         filename: "index.[hash].js",
@@ -17,8 +17,19 @@ module.exports = {
     },
     module: {
         rules: [
-            { test: /\.tsx?$/, loader: "ts-loader", query: { compilerOptions: { noEmit: false } } }
-            //{ test: /\.less$/, use: ["style-loader", "css-loader?-url", "less-loader"] }
+            {
+                test: /\.tsx?$/,
+                loader: "ts-loader",
+                query: {
+                    compilerOptions: {
+                        noEmit: false
+                    }
+                }
+            },
+            {
+                test: /\.less$/,
+                use: ["style-loader", "css-loader?-url", "less-loader"]
+            }
         ]
     },
     plugins: [