linaria 生成的标签 模板字符串使用props 无效

[Big0range]

相关平台

H5

浏览器版本: 84.0.4147.89
使用框架: React

复现步骤

const Title = styled(Button)color: ${props => props.color};

期望结果

能够修改color

实际结果

实际编译成 color: var(--t18dh6sw-0);

环境信息

  Taro CLI 3.0.17 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 14.13.0 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.4 - C:\Users\asd\AppData\Roaming\npm\yarn.CMD
      npm: 6.14.8 - C:\Users\asd\AppData\Roaming\npm\npm.CMD

---

补充信息

啊

[fred8617]

加油大佬们，解决好Q一下

[Chen-jj]

config/index.js 配置中，h5.webpackChain 也需要注入 linariaLoader 。

文档中的配置只配置了 mini.webpackChain，所以只有小程序生效，我们改一下文档。

config = {
  // ...
  h5: {
    webpackChain(chain, webpack) {
      // linaria/loader 选项详见 https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#webpack
      chain.module
        .rule('script')
        .use('linariaLoader')
        .loader('linaria/loader')
        .options({
          sourceMap: process.env.NODE_ENV !== 'production',
        })
    }
  }
}

[lzhlo]

config/index.js 配置中，h5.webpackChain 也需要注入 linariaLoader 。

文档中的配置只配置了 mini.webpackChain，所以只有小程序生效，我们改一下文档。

config = {
  // ...
  h5: {
    webpackChain(chain, webpack) {
      // linaria/loader 选项详见 https://github.com/callstack/linaria/blob/master/docs/BUNDLERS_INTEGRATION.md#webpack
      chain.module
        .rule('script')
        .use('linariaLoader')
        .loader('linaria/loader')
        .options({
          sourceMap: process.env.NODE_ENV !== 'production',
        })
    }
  }
}

已配置 但是h5并未生效

[Chen-jj]

@lzhlo 升级到最新版再试试咯，我这边 ok