样式-jsx内联工作，但不作为模块。

Question

我已经在Preact (使用此TS模板设置)项目中添加了样式-jsx，并且可以通过<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.

在所以和Github上有一些关于它的答案/解决方案，但是它们都涉及更改webpack配置--而且我没有webpack配置。看起来，preact-cli中没有一个是现成的。我按照推荐的方式将babel规则添加到我的babelrc中：

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

我没有安装任何额外的macros或插件从babel，然而，因为这不是在最初的说明在样式-jsx自述。

Answer 1

在Preact-CLI中，目前还不支持使用.babelrc，尽管这是因为我还没有找到一个奇怪的bug。真对不起。

然而，您仍然可以编辑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 }]);
}

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