feat: add less-loader to support cssModules

Author: erha19

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+charset = utf-8
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -38,7 +38,7 @@ node_modules/
 jspm_packages/
 
 # TypeScript v1 declaration files
-typings/
+# typings/
 
 # Optional npm cache directory
 .npm

packages/file-tree/src/browser/file-tree.view.tsx

@@ -3,6 +3,7 @@ import { useInjectable } from '@ali/ide-core-browser';
 import { CloudFile } from '../common';
 import { observer } from 'mobx-react-lite';
 import FileTreeService from './file-tree.service';
+import * as style from './index.less';
 
 const FileItem = observer((props: { file: CloudFile }) => {
   return (
@@ -15,10 +16,9 @@ const FileItem = observer((props: { file: CloudFile }) => {
 export const FileTree = observer(() => {
   const instance = useInjectable(FileTreeService);
   const files = instance.files;
-
   return (
     <div>
-      <h1>FileTree:</h1>
+      <h1 className={style.kt_filetree_header}>FileTree:</h1>
       <p><button onClick={ instance.createFile }>创建文件</button></p>
       <ul>
         {files && files.map((file) => (

packages/file-tree/src/browser/index.less

@@ -0,0 +1,6 @@
+@nice-blue: #5B83AD;
+@light-blue: @nice-blue + #111;
+
+.kt_filetree_header {
+  color: @light-blue;
+}

tool/dev-tool/package.json

@@ -14,13 +14,16 @@
     "@ali/ide-core": "^0.0.9",
     "@ali/ide-core-browser": "^0.0.9",
     "@ali/ide-core-node": "^0.0.9",
-    "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.6.0",
     "@types/koa": "^2.0.48",
     "@types/koa-bodyparser": "^4.2.2",
     "css-loader": "^2.1.1",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
     "koa": "^2.7.0",
     "koa-bodyparser": "^4.2.1",
+    "less": "^3.9.0",
+    "less-loader": "^5.0.0",
+    "mini-css-extract-plugin": "^0.6.0",
     "mobx": "^5.9.4",
     "mobx-react-lite": "^1.3.1",
     "node-sass": "^4.11.0",
@@ -29,7 +32,6 @@
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "style-resources-loader": "^1.2.1",
-    "file-loader": "^3.0.1",
     "ts-loader": "^5.4.3",
     "ts-node": "8.0.2",
     "tsconfig-paths": "^3.8.0",

tool/dev-tool/src/webpack.js

@@ -1,6 +1,7 @@
 // tslint:disable:no-var-requires
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
 
 exports.createWebpackConfig = function(dir) {
   return {
@@ -10,10 +11,10 @@ exports.createWebpackConfig = function(dir) {
       path: dir + '/dist',
     },
     resolve: {
-      extensions: ['.ts', '.tsx', '.js', '.json'],
+      extensions: ['.ts', '.tsx', '.js', '.json', '.less'],
     },
     mode: 'development',
-    devtool: 'eval',
+    devtool: 'sourcemap',
     module: {
       rules: [
         {
@@ -28,8 +29,33 @@ exports.createWebpackConfig = function(dir) {
           test: /\.css$/,
           use: [MiniCssExtractPlugin.loader, 'css-loader'],
         },
+        {
+          test: /\.less$/,
+          use: [
+            {
+              loader: "style-loader"
+            },
+            {
+              loader: "css-loader",
+              options: {
+                sourceMap: true,
+                modules: true,
+                localIdentName: "[local]___[hash:base64:5]"
+              }
+            },
+            {
+              loader: "less-loader"
+            }
+          ]
+        }
       ],
     },
+    resolveLoader: {
+      modules: [path.join(__dirname, '../node_modules'), path.resolve('node_modules')],
+      extensions: ['.ts', '.tsx', '.js', '.json', '.less'],
+      mainFields: ['loader', 'main'],
+      moduleExtensions: ['-loader'],
+    },
     plugins: [
       new HtmlWebpackPlugin({
         template: __dirname + '/index.html',

tsconfig.json

@@ -7,6 +7,7 @@
   "include": [
     "./packages",
     "./tool",
-    "./scripts"
+    "./scripts",
+    "./typings"
   ]
 }

typings/index.d.ts

@@ -0,0 +1 @@
+declare module '*.less';