webpack 스타일 가져 오기 브라우저에서 Uncaught TypeError를 가져옵니다.

Question

webpack으로 CSS를로드하고 테스트 컴포넌트 (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.d.ts typings를 위해 CSS-모듈 로더 ''를 이용하여 생성되는 "과 다음과 같다있는 style.css '

.title { 
    color: red; 
} 

(가) 파일은 간단'

012,351,

export interface IStyleCss { 
    'title': string; 
} 

export const locals: IStyleCss; 

프로젝트를 https://github.com/RasPelikan/preact-war으로 푸시했습니다. 파일은 src/main/frontend에서 찾을 수 있습니다. 서버 구성 요소는 Java이므로 Maven 프로젝트입니다. 그래서 나는 결과를 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] ------------------------------------------------------------------------ 

들으, 스테판

PS : 나는 preact하는 requirejs과 (여러 이유로) 웹팩와 각도 1.4.8로 전환하고있어 . 그래서 저는 webpack을 시작하는 초보자입니다.

Answer 1

당신은 웹팩에 휩싸이고 Typescript는 보지 않습니다.

당신이 경우에

, import * as styles from "./style.css"; 다음 style.css는 당신이 styles 객체 클래스를 찾을 수 없습니다 하위 객체에거야, .title { color: red; }이 포함되어 있습니다. styles.local 존재하지 않습니다.

그래서, 마지막으로 내가 알아 낸 styles.CLASSNAME

Answer 2

에에 액세스하는 대신, styles.local.CLASSNAME에에 액세스하지 않습니다. Shawn에게 감사 드리며, css-loader 대신 Typescript .d.ts 파일에 중점을두고 "typings-for-css-modules-loader"옵션에서 복사/붙여 넣기 오류가 있음을 알았습니다. 나는 어디에서

camelcase: true, 
namedexport: true, 

복사를 사용하지만, 대소 문자를 구분하고 있어야한다

camelCase: true, 
namedExport: true, 

인해 잘못된 경우 단순히 무시 옵션! 이제 styles.css.d.ts는 다음과 같습니다.

export const title: string; 

올바른 방법은 무엇이며 이제는 모든 것이 좋습니다.

들으 스테판