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\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] > 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\4.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\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] ------------------------------------------------------------------------

THX，斯蒂芬

PS：我正在从带有requirejs的Angular 1.4.8切换到preact和webpack（出于很多原因）。所以我是webpack的新手。

Answer 1

您已经陷入了网络包而没有看到打字稿。

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

因此，请勿在{{1}}访问它们，而是在styles.local.CLASSNAME访问它们

Answer 2

最后我想通了。感谢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;

哪种方法正确，现在一切都很好！

Thx，Stephan

webpack样式导入会在浏览器中显示Uncaught TypeError

2 个答案: