webpack 样式导入在浏览器中带来 Uncaught TypeError

Question

我正在尝试通过 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.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.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] > node-sass@4.7.2 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.7.2\win32-x64-57_binding.node
[INFO] 
[INFO] > uglifyjs-webpack-plugin@0.4.6 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] > node-sass@4.7.2 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] > preact@8.2.7 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 preact-test@0.0.0 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[=14=].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[=14=].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 的新手。

Answer 1

你正忙于 webpack 而没有看 Typescript。

如果你这样做，import * as styles from "./style.css"; 然后 style.css 包含 .title { color: red; }，那么你会在 styles 对象上找到你的类而不是在一个子对象上。 styles.local 不存在。

因此，不要在 styles.local.CLASSNAME 访问它们，而是在 styles.CLASSNAME

访问它们

Answer 2

我终于明白了。感谢 Shawn，我专注于 Typescript .d.ts 文件而不是 css-loader，并发现我在 "typings-for-css-modules-loader" 的选项中有一个 copy/paste 错误。我用了

camelcase: true,
namedexport: true,

从任何地方复制，但区分大小写并且必须

camelCase: true,
namedExport: true,

由于错误的案例，选项被忽略了！现在样式。css.d.ts 看起来像这样

export const title: string;

这是正确的方法，现在一切都很好！

webpack 样式导入在浏览器中带来 Uncaught TypeError

webpack style import brings Uncaught TypeError in browser

css

typescript

webpack

preact