styled-jsx 内联工作，但不作为模块

Question

我已将 styled-jsx 添加到我的 Preact（使用此 TS template 设置）项目中，并且可以通过 <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>

但是，如果我在关注 their instructions 时将该样式提取到单独的 css 变量中（在同一文件中或外部），则会收到以下错误：

if you are getting this error it means that your `css` tagged template literals were not transpiled.

在 SO 和 Github 上有一些答案/解决方案，但它们都涉及更改 webpack 配置——而且我没有 webpack 配置。看起来没有一个开箱即用的preact-cli。我已按照建议将 babel 规则添加到我的babelrc：

{
  "presets": ["preact-cli/babel"],
  "plugins": [["styled-jsx/babel", { "optimizeForSpeed": true }]]
}

但是，我没有安装任何额外的 macros 或 babel 插件，因为那不在 styled-jsx 自述文件的原始说明中。

Answer 1

目前 Preact-CLI 不支持使用 .babelrc，尽管这是由于我还没有找到一个奇怪的错误造成的。对此感到抱歉。

但是，您仍然可以通过 preact.config.js、the docs for which can be found here 来编辑 Webpack 配置。在您的情况下，您需要的是以下内容：

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 }]);
}

如果这能解决您的问题，请告诉我。