反応モジュールとCSSモジュールを経由してビューを構築しているノードexpress apiで作業しています。成分)。反応出力はrenderToStaticMarkup()
でシリアル化され、JSON応答でリクエスターに返されます。私はこの応答でもコンパイルされたCSSを送るつもりです。サーバ側のアプリケーションでwebpack監視ファイルを編集した後、webpack v3でCSSローダーエラーが発生しました
webpackを使用してサーバーアプリケーションを1つのファイルにバンドルする作業プロセスがあります。私は現在、CSS(モジュール)を1つのファイルにまとめています(これについては後で読む予定です)。
次のように私は(APIはPOSTを必要とし、とにかく更新する「ページ」は存在しないとのWebPACK-devのサーバーを使用することはできません)そのウォッチの機能とのWebPACKを使用しています:
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
可能な限りウェブパックの設定を簡略化していますが、引き続き問題が発生します。私の単純化された設定(ファイルへの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;
だから私の質問は、なぜこの作品は最初のコンパイルで大丈夫行い、あります変更後の再コンパイルではありませんか?