2
반응 및 CSS 모듈을 통해보기를 작성중인 노드 express api에서 작업 중입니다. 구성 요소). 반응 출력은 renderToStaticMarkup()으로 직렬화되며 JSON 응답으로 요청자에게 다시 전송됩니다. 나는 또한이 응답에서 컴파일 된 CSS를 보낼 의도가있다.서버 측 앱에서 웹팩 시청 파일을 편집 한 후 webpack v3에서 CSS 로더 오류가 발생했습니다.
내 서버 앱을 하나의 파일로 묶는 webpack을 통해 작동하는 빌드 프로세스가 있습니다. 현재 CSS (모듈)를 하나의 파일로 묶어 놓고 있습니다 (나중에이 책을 읽으려고합니다). 다음과 같이 나는 그것의 시계 시설과 웹팩을 사용하고
는 (API가 POST를 필요로 웹팩-DEV-서버를 사용할 수없고 '페이지'어쨌든 업데이트 할 수 없음) :
cross-env NODE_ENV=development webpack -w --colors
내 문제는 그러나이 모든 첫 번째 컴파일 잘 작동하는 동안, 내가 파일을 변경하자마자 가져온 CSS 파일에 적절한 로더가 필요하다는 webpack 오류가 발생합니다.
ERROR in ./src/app/components/Suggestions/Suggestions.css
Module parse failed: /home/me/myproject/src/app/components/Suggestions/Suggestions.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .suggestions {
| background: blue;
| color: orange;
@ ./src/app/components/Suggestions/Suggestions.js 11:19-47
@ ./src/app/components/Suggestions/index.js
@ ./src/server/middleware/buildSuggestions.js
@ ./src/server/routes/index.js
@ ./src/server/server.js
@ multi babel-polyfill ./src/server/server.js
가능한 한 내 webpack 구성을 단순화했으며 여전히 문제가 발생합니다. 다음과 같이 내 간단한 설정 (파일 CSS를 추출하고 더 PostCSS되지 않음)입니다 :
webpack.config.babel.js
import path from 'path';
import nodeExternals from 'webpack-node-externals';
import PATHS from './config/paths';
// Host and port settings to spawn the dev server on
const HOST = 'localhost';
const PORT = 3000;
const LOCAL = `http://${HOST}:${PORT}`;
const DEV = process.env.NODE_ENV === 'development';
let serverConfig = {
entry: [
"babel-polyfill",
path.resolve(PATHS.src, 'server/server.js'),
],
output: {
filename: 'server.js',
path: PATHS.dist,
publicPath: '/'
},
module: {
rules: [
{
test: /\.jsx?$/,
include: PATHS.src,
use: {
loader: 'babel-loader',
options: {
// babelrc at project root only for compiling this webpack
babelrc: false,
presets: [
'env',
'react'
],
plugins: [
'transform-object-rest-spread',
'syntax-dynamic-import',
'transform-class-properties',
]
}
}
},
{
test: /\.css$/,
use: [
{
loader : 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[local]-[hash:base64]',
sourceMap: DEV
},
}
]
}
],
},
plugins: [
],
target: 'node',
externals: [nodeExternals()]
};
export default serverConfig;
그래서 제 질문은, 왜 먼저 컴파일에이 작품이 괜찮 않습니다 변경 후 다시 컴파일하지 않습니까?