我已將 styled-jsx 添加到我的 Preact（使用此TS 模板設定）專案中，并且可以通過<style>標簽設定行內樣式，沒有任何問題，例如：
<div>
<h1>Hello{name && `, ${name}`}!</h1>
<form onSubmit={handleNameSubmit}>
<input type="text" value={input} onInput={handleInput} />
<button type="submit" className="test">
Update {input && `as ${input}`}
</button>
</form>
<style jsx>
{`
h1 {
color: red;
}
.test {
color: blue;
}
`}
</style>
</div>
但是，如果我css按照他們的說明將該樣式提取到一個單獨的變數中（在同一檔案中或外部），則會出現以下錯誤：
if you are getting this error it means that your `css` tagged template literals were not transpiled.
在SO和Github上有一些答案/解決方案，但它們都涉及更改 webpack 配置——而我沒有 webpack 配置。看起來沒有一個開箱即用的preact-cli. 我已babelrc按照建議將 babel 規則添加到我的：
{
"presets": ["preact-cli/babel"],
"plugins": [["styled-jsx/babel", { "optimizeForSpeed": true }]]
}
macros但是，我沒有從 babel安裝任何額外的插件或插件，因為這不在 styled-jsx 自述檔案的原始說明中。
uj5u.com熱心網友回復：
.babelrc目前在 Preact-CLI 中不支持使用，盡管這是由于我還沒有能夠追蹤到的一個奇怪的錯誤。對于那個很抱歉。
但是，您仍然可以編輯 Webpack 配置，這就是您的preact.config.js，可以在此處找到其檔案。在您的情況下，您需要的是以下內容：
preact.config.js
export default (config, env, helpers) => {
const { rule } = helpers.getLoadersByName(config, 'babel')[0];
const babelConfig = rule.options;
babelConfig.plugins.push(['styled-jsx/babel', { 'optimizeForSpeed': true }]);
}
如果這能解決您的問題，請告訴我。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/396480.html
標籤：网络包 babeljs 预反应 css-in-js 风格化的jsx