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 and Github 上有一些 answers/solutions，但它们都涉及更改 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 }]);
}

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

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

styled-jsx works inline but not as module

webpack

babeljs

preact

css-in-js

styled-jsx