Chrome 開発ツールで CSS BLOB のファイル名を確認したかったのです。
スタイルローダーの readme には、output.publicPath webpack プロパティを設定する必要があると記載されています。 gatsby-config.js 経由で設定すると、 gatsby develop
失敗します。
gatsby-node.js:
exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) => actions.setWebpackConfig({
output: {
publicPath: '/',
},
});
それはパスを設定する必要があり、絶対パスは、設定したスタイルローダーからcssファイルに対して生成されることになっています
> gatsby develop
success open and validate gatsby-configs - 0.058 s
success load plugins - 1.072 s
success onPreInit - 0.009 s
success initialize cache - 0.035 s
success copy gatsby files - 0.138 s
success onPreBootstrap - 0.026 s
success source and transform nodes - 0.087 s
success building schema - 0.349 s
success createPages - 0.004 s
success createPagesStatefully - 0.082 s
success onPreExtractQueries - 0.015 s
success update schema - 0.042 s
success extract queries from components - 0.157 s
success run static queries - 0.208 s — 2/2 10.53 queries/second
success run page queries - 0.052 s — 6/6 146.57 queries/second
success write out page data - 0.011 s
success write out redirect data - 0.008 s
success Build manifest and related icons - 0.411 s
success Build manifest and related icons - 0.014 s
success onPostBootstrap - 0.476 s
⠀
info bootstrap finished - 9.560 s
⠀
error There was an error compiling the html.js component for the development server.
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html
Error: ./.cache/gatsby-browser-entry.js
Module not found: Error: Can't resolve 'gatsby-link' in '/.../.cac
he'
resolve 'gatsby-link' in '/.../.cache'
Parsed request is a module
@ ./.cache/gatsby-browser-entry.js 3:0-112 42:0-45:64 42:0-45:64 42:0-45:64 42:0-45:64 42:0-45:64
42:0-45:64 42:0-45:64 42:0-45:64
@ ./node_modules/gatsby-plugin-manifest/gatsby-ssr.js
@ ./.cache/api-runner-ssr.js
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /.../.npm/_logs/2019-06-16T19_56_49_086Z-debug.log
error Command failed with exit code 1.
システム:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-4260U CPU @ 1.40GHz
シェル: 5.6.2 - /usr/local/bin/zsh
バイナリ:
ノード: 10.15.2 - /usr/local/bin/node
糸: 1.13.0 - /usr/local/bin/yarn
npm: 6.7.0 - /usr/local/bin/npm
言語:
Python: 2.7.15 - /usr/local/bin/python
ブラウザ:
クローム: 74.0.3729.169
サファリ: 12.1.1
npmパッケージ:
ギャツビー: ^2.8.6 => 2.8.6
gatsby-image: ^2.1.2 => 2.1.2
gatsby-plugin-manifest: ^2.1.1 => 2.1.1
gatsby-plugin-offline: ^2.1.1 => 2.1.1
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
gatsby-plugin-sass: ^2.0.11 => 2.0.11
gatsby-plugin-sharp: ^2.1.3 => 2.1.3
gatsby-plugin-typescript: ^2.0.15 => 2.0.15
gatsby-source-filesystem: ^2.0.38 => 2.0.38
gatsby-transformer-sharp: ^2.1.21 => 2.1.21
やあ@wildeyes
設定されている場合、偶発的な破損を防ぐために、いくつかの構成オプションが無視されます。 具体的には、entry、output、target、resolveLoaders への変更は無視されます。
https://www.gatsbyjs.org/docs/actions/#setWebpackConfig (上記の抜粋) に記載されているように、いくつかのキーの設定はサポートされていません。 output
はその 1 つです。
現時点ではこの問題はクローズしていますが、これに関連して何か他にお手伝いできることがあれば、遠慮なく再開してください。