1

我已将 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 自述文件的原始说明中。

4

1 回答 1

1

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

让我知道这是否能解决您的问题。

于 2021-12-25T01:14:23.247 回答