我正在尝试通过webpack加载css并在preact组件中使用它（使用Typescript）。虽然有几个例子，但它们看起来都很容易我在浏览器中出错（构建顺利）：
app.tsx?78df:31 Uncaught TypeError: Cannot read property 'title' of undefined
at App.render (app.tsx?78df:31)
at renderComponent (preact.esm.js?acc9:728)
at renderComponent (preact.esm.js?acc9:754)
at renderComponent (preact.esm.js?acc9:754)
at setComponentProps (preact.esm.js?acc9:676)
at buildComponentFromVNode (preact.esm.js?acc9:856)
at idiff (preact.esm.js?acc9:397)
at diff (preact.esm.js?acc9:348)
at Object.render (preact.esm.js?acc9:991)
at eval (bootstrap.tsx?4488:13)
我的app.tsx文件如下所示：
import * as styles from "./style.css";
...
return (
<div>
<h1 className={styles.locals.title}>PROPS: {props.name} state: {state.name}</h1>
<ul>
'style.css'文件很简单：
.title {
color: red;
}
'style.css.d.ts'是使用'typings-for-css-modules-loader'生成的，如下所示：
export interface IStyleCss {
'title': string;
}
export const locals: IStyleCss;
我把项目推到了https://github.com/RasPelikan/preact-war。可以在src / main / frontend找到这些文件。这是一个Maven项目，因为服务器组件将是Java。所以我将结果放在target / preact-war-0.0.1-SNAPSHOT.war中进行下载。
构建输出如下所示：
[INFO] Scanning for projects...
[INFO]
[INFO] ------------------------------------------------------------------------
[INFO] Building preact-war 0.0.1-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO]
[INFO] --- frontend-maven-plugin:1.6:install-node-and-npm (install node and npm) @ preact-war ---
[INFO] Installing node version v8.9.3
[INFO] Copying node binary from C:\Users\pelikast\.m2\repository\com\github\eirslett\node\8.9.3\node-8.9.3-win-x64.exe to C:\Users\pelikast\workspace-jee\preact-war\target\node\node.exe
[INFO] Installed node locally.
[INFO] Installing npm version 5.5.1
[INFO] Unpacking C:\Users\pelikast\.m2\repository\com\github\eirslett\npm\5.5.1\npm-5.5.1.tar.gz into C:\Users\pelikast\workspace-jee\preact-war\target\node\node_modules
[INFO] Installed npm locally.
[INFO]
[INFO] --- frontend-maven-plugin:1.6:npm (npm install) @ preact-war ---
[INFO] Running 'npm install --no-optional' in C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend
[WARNING] npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-4g8BF3gKWBHeM1jAFmMPHofuJlwTUU4iHJ0i3mwXRHwy74RU6VBOgl9kDVMGpapvGcMlVqV5G6v9XmV66Qqd7w== integrity checksum failed when using sha512: wanted sha512-4g8BF3gKWBHeM1jAFmMPHofuJlwTUU4iHJ0i3mwXRHwy74RU6VBOgl9kDVMGpapvGcMlVqV5G6v9XmV66Qqd7w== but got sha1-IyEZIhebgfdEh1S3/fykW4N0oVo=. (63409 bytes)
[WARNING] npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
[INFO]
[INFO] > [email protected] install C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend\node_modules\node-sass
[INFO] > node scripts/install.js
[INFO]
[INFO] Cached binary found at C:\Users\pelikast\AppData\Roaming\npm-cache\node-sass\4.7.2\win32-x64-57_binding.node
[INFO]
[INFO] > [email protected] postinstall C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
[INFO] > node lib/post_install.js
[INFO]
[INFO]
[INFO] > [email protected] postinstall C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend\node_modules\node-sass
[INFO] > node scripts/build.js
[INFO]
[INFO] Binary found at C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend\node_modules\node-sass\vendor\win32-x64-57\binding.node
[INFO] Testing binary
[INFO] Binary is fine
[INFO]
[INFO] > [email protected] postinstall C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend\node_modules\preact
[INFO] > node -e "console.log('\u001b[35m\u001b[1mLove Preact? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/preact/donate\u001b[0m')"
[INFO]
[INFO] [35m[1mLove Preact? You can now donate to our open collective:[22m[39m
[INFO] > [34mhttps://opencollective.com/preact/donate[0m
[WARNING] npm WARN [email protected] No repository field.
[ERROR]
[INFO] added 746 packages in 64.565s
[INFO]
[INFO] --- frontend-maven-plugin:1.6:webpack (webpack build) @ preact-war ---
[INFO] Running 'webpack.js -d --display-error-details --config ./webpack.config.js' in C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend
[INFO] Hash: e4bfaca42bf58e78e61c
[INFO] Version: webpack 3.10.0
[INFO] Time: 3062ms
[INFO] Asset Size Chunks Chunk Names
[INFO] ../../../target/preact-war-0.0.1-SNAPSHOT/public/bundle.js 174 kB 0 [emitted] main
[INFO] [2] ./bootstrap.tsx 501 bytes {0} [built]
[INFO] [3] ./app.tsx 1.89 kB {0} [built]
[INFO] [4] ./style.css 1.04 kB {0} [built]
[INFO] [5] ./node_modules/css-loader?{"camelcase":true,"namedexport":true,"modules":true,"importLoaders":2}!./style.css 271 bytes {0} [built]
[INFO] [9] ./about.tsx 948 bytes {0} [built]
[INFO] + 5 hidden modules
[INFO] Refreshing files after webpack: C:\Users\pelikast\workspace-jee\preact-war\target\preact-war-0.0.1-SNAPSHOT\public
[INFO]
[INFO] --- maven-resources-plugin:3.0.2:resources (default-resources) @ preact-war ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] Copying 0 resource
[INFO]
[INFO] --- maven-compiler-plugin:3.6.1:compile (default-compile) @ preact-war ---
[INFO] Nothing to compile - all classes are up to date
[INFO]
[INFO] --- maven-resources-plugin:3.0.2:testResources (default-testResources) @ preact-war ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] skip non existing resourceDirectory C:\Users\pelikast\workspace-jee\preact-war\src\test\resources
[INFO]
[INFO] --- maven-compiler-plugin:3.6.1:testCompile (default-testCompile) @ preact-war ---
[INFO] No sources to compile
[INFO]
[INFO] --- maven-surefire-plugin:2.12.4:test (default-test) @ preact-war ---
[INFO] No tests to run.
[INFO]
[INFO] --- maven-war-plugin:3.2.0:war (default-war) @ preact-war ---
[INFO] Packaging webapp
[INFO] Assembling webapp [preact-war] in [C:\Users\pelikast\workspace-jee\preact-war\target\preact-war-0.0.1-SNAPSHOT]
[INFO] Processing war project
[INFO] Copying webapp resources [C:\Users\pelikast\workspace-jee\preact-war\src\main\webapp]
[INFO] Webapp assembled in [63 msecs]
[INFO] Building war: C:\Users\pelikast\workspace-jee\preact-war\target\preact-war-0.0.1-SNAPSHOT.war
[INFO]
[INFO] --- maven-install-plugin:2.4:install (default-install) @ preact-war ---
[INFO] Installing C:\Users\pelikast\workspace-jee\preact-war\target\preact-war-0.0.1-SNAPSHOT.war to C:\Users\pelikast\.m2\repository\at\phactum\test\preact-war\0.0.1-SNAPSHOT\preact-war-0.0.1-SNAPSHOT.war
[INFO] Installing C:\Users\pelikast\workspace-jee\preact-war\pom.xml to C:\Users\pelikast\.m2\repository\at\phactum\test\preact-war\0.0.1-SNAPSHOT\preact-war-0.0.1-SNAPSHOT.pom
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 01:52 min
[INFO] Finished at: 2017-12-17T21:27:07+01:00
[INFO] Final Memory: 13M/220M
[INFO] ------------------------------------------------------------------------
谢谢，斯蒂芬
PS：我正在从带有requirejs的Angular 1.4.8切换到preact和webpack（出于很多原因）。所以我是webpack的新手。
你正陷入webpack而不是关注Typescript。
如果你这样做，import * as styles from "./style.css";然后style.css包含.title { color: red; }，那么你将在styles对象上找到你的类而不是在子对象上。 styles.local不存在。
所以，不要在styles.local.CLASSNAME访问它们，而是在styles.CLASSNAME访问它们
最后我想通了。感谢Shawn，我专注于Typescript .d.ts文件而不是css-loader，并且发现我在“typings-for-css-modules-loader”的选项中有一个复制/粘贴错误。我用了
camelcase: true,
namedexport: true,
从任何地方复制，但它是区分大小写的，必须是
camelCase: true,
namedExport: true,
由于错误的情况，选项只是被忽略了！现在styles.css.d.ts看起来像这样
export const title: string;
这是正确的方法，现在一切都很好！
谢谢，斯蒂芬