From cff9a87882d22a784053a8ad9e8603bf62f39190 Mon Sep 17 00:00:00 2001 From: zhandouxiaojiji Date: Sat, 10 Oct 2020 19:18:00 +0800 Subject: [PATCH] add css & style loader --- package-lock.json | 222 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 + src/index.css | 4 + src/index.tsx | 3 +- webpack.config.js | 6 +- 5 files changed, 235 insertions(+), 2 deletions(-) create mode 100644 src/index.css diff --git a/package-lock.json b/package-lock.json index dea3433..7c81aad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1366,6 +1366,77 @@ "randomfill": "^1.0.3" } }, + "css-loader": { + "version": "4.3.0", + "resolved": "https://registry.npm.taobao.org/css-loader/download/css-loader-4.3.0.tgz", + "integrity": "sha1-yIivZLKlsuhUYscsD0qFx+Lggh4=", + "dev": true, + "requires": { + "camelcase": "^6.0.0", + "cssesc": "^3.0.0", + "icss-utils": "^4.1.1", + "loader-utils": "^2.0.0", + "postcss": "^7.0.32", + "postcss-modules-extract-imports": "^2.0.0", + "postcss-modules-local-by-default": "^3.0.3", + "postcss-modules-scope": "^2.2.0", + "postcss-modules-values": "^3.0.0", + "postcss-value-parser": "^4.1.0", + "schema-utils": "^2.7.1", + "semver": "^7.3.2" + }, + "dependencies": { + "camelcase": { + "version": "6.0.0", + "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-6.0.0.tgz?cache=0&sync_timestamp=1589682790492&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcamelcase%2Fdownload%2Fcamelcase-6.0.0.tgz", + "integrity": "sha1-Uln3ww414njxvcKk2RIws3ytmB4=", + "dev": true + }, + "json5": { + "version": "2.1.3", + "resolved": "https://registry.npm.taobao.org/json5/download/json5-2.1.3.tgz", + "integrity": "sha1-ybD3+pIzv+WAf+ZvzzpWF+1ZfUM=", + "dev": true, + "requires": { + "minimist": "^1.2.5" + } + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz", + "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "schema-utils": { + "version": "2.7.1", + "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.7.1.tgz", + "integrity": "sha1-HKTzLRskxZDCA7jnpQvw6kzTlNc=", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.5", + "ajv": "^6.12.4", + "ajv-keywords": "^3.5.2" + } + }, + "semver": { + "version": "7.3.2", + "resolved": "https://registry.npm.taobao.org/semver/download/semver-7.3.2.tgz", + "integrity": "sha1-YElisFK4HtB4aq6EOJ/7pw/9OTg=", + "dev": true + } + } + }, + "cssesc": { + "version": "3.0.0", + "resolved": "http://registry.npm.taobao.org/cssesc/download/cssesc-3.0.0.tgz", + "integrity": "sha1-N3QZGZA7hoVl4cCep0dEXNGJg+4=", + "dev": true + }, "csstype": { "version": "3.0.3", "resolved": "https://registry.npm.taobao.org/csstype/download/csstype-3.0.3.tgz?cache=0&sync_timestamp=1598350086358&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcsstype%2Fdownload%2Fcsstype-3.0.3.tgz", @@ -2589,6 +2660,15 @@ "safer-buffer": ">= 2.1.2 < 3.0.0" } }, + "icss-utils": { + "version": "4.1.1", + "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-4.1.1.tgz?cache=0&sync_timestamp=1600767346060&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-4.1.1.tgz", + "integrity": "sha1-IRcLU3ie4nRHwvR91oMIFAP5pGc=", + "dev": true, + "requires": { + "postcss": "^7.0.14" + } + }, "ieee754": { "version": "1.1.13", "resolved": "https://registry.npm.taobao.org/ieee754/download/ieee754-1.1.13.tgz", @@ -2617,6 +2697,12 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, + "indexes-of": { + "version": "1.0.1", + "resolved": "http://registry.npm.taobao.org/indexes-of/download/indexes-of-1.0.1.tgz", + "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=", + "dev": true + }, "infer-owner": { "version": "1.0.4", "resolved": "https://registry.npm.taobao.org/infer-owner/download/infer-owner-1.0.4.tgz", @@ -3584,6 +3670,93 @@ "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=", "dev": true }, + "postcss": { + "version": "7.0.35", + "resolved": "https://registry.npm.taobao.org/postcss/download/postcss-7.0.35.tgz?cache=0&sync_timestamp=1601330112363&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss%2Fdownload%2Fpostcss-7.0.35.tgz", + "integrity": "sha1-0r4AuZj38hHYonaXQHny6SuXDiQ=", + "dev": true, + "requires": { + "chalk": "^2.4.2", + "source-map": "^0.6.1", + "supports-color": "^6.1.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "http://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz", + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", + "dev": true + }, + "supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-6.1.0.tgz?cache=0&sync_timestamp=1598611709087&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-6.1.0.tgz", + "integrity": "sha1-B2Srxpxj1ayELdSGfo0CXogN+PM=", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, + "postcss-modules-extract-imports": { + "version": "2.0.0", + "resolved": "https://registry.npm.taobao.org/postcss-modules-extract-imports/download/postcss-modules-extract-imports-2.0.0.tgz?cache=0&sync_timestamp=1600776097223&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-extract-imports%2Fdownload%2Fpostcss-modules-extract-imports-2.0.0.tgz", + "integrity": "sha1-gYcZoa4doyX5gyRGsBE27rSTzX4=", + "dev": true, + "requires": { + "postcss": "^7.0.5" + } + }, + "postcss-modules-local-by-default": { + "version": "3.0.3", + "resolved": "https://registry.npm.taobao.org/postcss-modules-local-by-default/download/postcss-modules-local-by-default-3.0.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-local-by-default%2Fdownload%2Fpostcss-modules-local-by-default-3.0.3.tgz", + "integrity": "sha1-uxTgzHgnnVBNvcv9fgyiiZP/u7A=", + "dev": true, + "requires": { + "icss-utils": "^4.1.1", + "postcss": "^7.0.32", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + } + }, + "postcss-modules-scope": { + "version": "2.2.0", + "resolved": "https://registry.npm.taobao.org/postcss-modules-scope/download/postcss-modules-scope-2.2.0.tgz?cache=0&sync_timestamp=1600777978458&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-scope%2Fdownload%2Fpostcss-modules-scope-2.2.0.tgz", + "integrity": "sha1-OFyuATzHdD9afXYC0Qc6iequYu4=", + "dev": true, + "requires": { + "postcss": "^7.0.6", + "postcss-selector-parser": "^6.0.0" + } + }, + "postcss-modules-values": { + "version": "3.0.0", + "resolved": "https://registry.npm.taobao.org/postcss-modules-values/download/postcss-modules-values-3.0.0.tgz?cache=0&sync_timestamp=1602187122469&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-values%2Fdownload%2Fpostcss-modules-values-3.0.0.tgz", + "integrity": "sha1-W1AA1uuuKbQlUwG0o6VFdEI+fxA=", + "dev": true, + "requires": { + "icss-utils": "^4.0.0", + "postcss": "^7.0.6" + } + }, + "postcss-selector-parser": { + "version": "6.0.4", + "resolved": "https://registry.npm.taobao.org/postcss-selector-parser/download/postcss-selector-parser-6.0.4.tgz?cache=0&sync_timestamp=1601045316432&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-selector-parser%2Fdownload%2Fpostcss-selector-parser-6.0.4.tgz", + "integrity": "sha1-VgdaE4CgRgTDiwY+p3Z6Epr1wrM=", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1", + "util-deprecate": "^1.0.2" + } + }, + "postcss-value-parser": { + "version": "4.1.0", + "resolved": "https://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-4.1.0.tgz", + "integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=", + "dev": true + }, "prepend-http": { "version": "2.0.0", "resolved": "https://registry.npm.taobao.org/prepend-http/download/prepend-http-2.0.0.tgz", @@ -4508,6 +4681,49 @@ "escape-string-regexp": "^1.0.2" } }, + "style-loader": { + "version": "2.0.0", + "resolved": "https://registry.npm.taobao.org/style-loader/download/style-loader-2.0.0.tgz?cache=0&sync_timestamp=1602247951903&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstyle-loader%2Fdownload%2Fstyle-loader-2.0.0.tgz", + "integrity": "sha1-lmlgL9RpB0DqrsE3eZoDrdu8OTw=", + "dev": true, + "requires": { + "loader-utils": "^2.0.0", + "schema-utils": "^3.0.0" + }, + "dependencies": { + "json5": { + "version": "2.1.3", + "resolved": "https://registry.npm.taobao.org/json5/download/json5-2.1.3.tgz", + "integrity": "sha1-ybD3+pIzv+WAf+ZvzzpWF+1ZfUM=", + "dev": true, + "requires": { + "minimist": "^1.2.5" + } + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz", + "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "schema-utils": { + "version": "3.0.0", + "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-3.0.0.tgz", + "integrity": "sha1-Z1AvaqK2ai1AMrQnmilEl4oJE+8=", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.6", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + } + } + }, "sumchecker": { "version": "3.0.1", "resolved": "https://registry.npm.taobao.org/sumchecker/download/sumchecker-3.0.1.tgz", @@ -4788,6 +5004,12 @@ "set-value": "^2.0.1" } }, + "uniq": { + "version": "1.0.1", + "resolved": "http://registry.npm.taobao.org/uniq/download/uniq-1.0.1.tgz", + "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=", + "dev": true + }, "unique-filename": { "version": "1.1.1", "resolved": "http://registry.npm.taobao.org/unique-filename/download/unique-filename-1.1.1.tgz", diff --git a/package.json b/package.json index 6d918bd..4714d9f 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,9 @@ }, "homepage": "https://github.com/zhandouxiaojiji/behavior3editor#readme", "devDependencies": { + "css-loader": "^4.3.0", "source-map-loader": "^1.1.0", + "style-loader": "^2.0.0", "ts-loader": "^8.0.4", "typescript": "^4.0.3", "webpack": "^4.44.2", diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..67e31af --- /dev/null +++ b/src/index.css @@ -0,0 +1,4 @@ +body { + background-color: #242424; + padding: 0px; +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 89333b4..a546b1f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,9 +1,10 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; - import Hello from "./components/Hello"; +import './index.css'; ReactDOM.render( , + //
hello!!!!!
, document.getElementById('root') as HTMLElement ); \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index eb470e0..98ae0a4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -18,7 +18,11 @@ module.exports = { module: { rules: [ { test: /\.tsx?$/, loader: "ts-loader" }, - { enforce: "pre", test: /\.js$/, loader: "source-map-loader" } + { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }, + { + test: /\.css$/, + loaders: ['style-loader', 'css-loader'] + } ] },