taro 小程序 CSS-in-JS 解決方案：linaria

NPM 安裝依賴

$ npm i linaria

配置項目根目錄的 babel.config.js

module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true
    }],
    'linaria/babel' // 添加到 babel-preset
  ]
}

之後配置 config/index.js

const config = {
  mini: {
    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: {
    webpackChain(chain, webpack) {
      chain.module
        .rule('script')
        .use('linariaLoader')
        .loader('linaria/loader')
        .options({
          sourceMap: process.env.NODE_ENV !== 'production',
        })
    }
  }
}

最後在項目根目錄新建 linaria.config.js

// linaria 配置詳見 https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md#options
module.exports = {
  rules: [
    {
      action: require("linaria/evaluators").shaker,
    },
    {
      test: /node_modules[\/\\](?!@tarojs)/,
      action: "ignore"
    }
  ]
}

業務代碼:

import { styled } from 'linaria/react'

......
 render () {
		const ViewLogin = styled(View)<{ backgroundImage: string,color:string}>`
     		 background-image:${props => props.backgroundImage};
			 color: ${props => props.color}
		`;

		return(
		  <ViewLogin className='login' color='red' backgroundImage={`url(${APP_CONF.IMG_OSS_PREFIX}/weapp/v1/images/login_bg.png?20211104)`}>
		)
 }