小程序定制主题无效

[shengzhou1216]

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.6.14

平台

weapp

重现链接

https://github.com/shengzhou1216/nutui-react-taro-theme-test

重现步骤

操作系统

win11

软件环境

node: v20.15.1
pnpm: 10.7.0
Taro v4.0.9

项目信息

使用 react-NutUI（NutUI + React 模板（https://nutui.jd.com/react/）） 创建的项目。

package.json

{
  "name": "nutui-react-taro-theme-test",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "templateInfo": {
    "name": "react-NutUI",
    "typescript": true,
    "css": "Sass",
    "framework": "React"
  },
  "scripts": {
    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:jd": "taro build --type jd",
    "build:quickapp": "taro build --type quickapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:jd": "npm run build:jd -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch"
  },
  "browserslist": [
    "last 3 versions",
    "Android >= 4.1",
    "ios >= 8"
  ],
  "author": "",
  "dependencies": {
    "@babel/runtime": "^7.21.5",
    "@tarojs/components": "4.0.9",
    "@tarojs/helper": "4.0.9",
    "@tarojs/plugin-platform-weapp": "4.0.9",
    "@tarojs/plugin-platform-alipay": "4.0.9",
    "@tarojs/plugin-platform-tt": "4.0.9",
    "@tarojs/plugin-platform-swan": "4.0.9",
    "@tarojs/plugin-platform-jd": "4.0.9",
    "@tarojs/plugin-platform-qq": "4.0.9",
    "@tarojs/plugin-platform-h5": "4.0.9",
    "@tarojs/plugin-html": "4.0.9",
    "@tarojs/runtime": "4.0.9",
    "@tarojs/shared": "4.0.9",
    "@tarojs/taro": "4.0.9",
    "@nutui/nutui-react-taro": "^2.6.14",
    "@tarojs/plugin-framework-react": "4.0.9",
    "@tarojs/react": "4.0.9",
    "react-dom": "^18.0.0",
    "react": "^18.0.0"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.24.1",
    "@babel/plugin-proposal-class-properties": "7.14.5",
    "@babel/core": "^7.8.0",
    "babel-plugin-import": "^1.13.8",
    "@tarojs/cli": "4.0.9",
    "@types/webpack-env": "^1.13.6",
    "@types/react": "^18.0.0",
    "webpack": "5.78.0",
    "@tarojs/taro-loader": "4.0.9",
    "@tarojs/webpack5-runner": "4.0.9",
    "babel-preset-taro": "4.0.9",
    "eslint-config-taro": "4.0.9",
    "eslint": "^8.12.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
    "react-refresh": "^0.11.0",
    "eslint-plugin-react": "^7.8.2",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "stylelint": "^14.4.0",
    "@typescript-eslint/parser": "^6.2.0",
    "@typescript-eslint/eslint-plugin": "^6.2.0",
    "typescript": "^5.1.0",
    "tsconfig-paths-webpack-plugin": "^4.0.1",
    "postcss": "^8.4.18",
    "ts-node": "^10.9.1",
    "@types/node": "^18.15.11"
  }
}

config/index.ts

{
 cache: {
      enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
 },
 sass: {
      resource: [
        path.resolve(__dirname, '..', 'src/assets/styles/custom_theme.scss')
      ],
      // 默认京东 APP 10.0主题 > @import "@nutui/nutui-react-taro/dist/styles/variables.scss";
      data: `@import "@nutui/nutui-react-taro/dist/styles/variables.scss";`
    },
}

custom_theme.scss

$color-primary: #478EF2;
$color-primary-end: #478EF2;

测试代码

import React, { useState } from 'react'
import { View } from '@tarojs/components'
import { Button } from '@nutui/nutui-react-taro'
import './index.scss'
function Index() {
  return (
    <View className='nutui-react-demo'>
      <Button type='primary'>按钮</Button>
    </View>
  )
}

export default Index

期望的结果是什么？

按钮颜色变为蓝色

实际的结果是什么？

按钮颜色为红色

环境信息

👽 Taro v4.0.9

Taro CLI 4.0.9 environment info:
System:
OS: Windows 11 10.0.26100
Binaries:
Node: 20.15.1 - ~\scoop\apps\nodejs-lts\current\node.EXE
Yarn: 1.22.22 - ~\scoop\apps\nodejs\current\bin\yarn.CMD
npm: 10.7.0 - ~\scoop\apps\nodejs-lts\current\npm.CMD
npmPackages:
@tarojs/cli: 4.0.9 => 4.0.9
@tarojs/components: 4.0.9 => 4.0.9
@tarojs/helper: 4.0.9 => 4.0.9
@tarojs/plugin-framework-react: 4.0.9 => 4.0.9
@tarojs/plugin-html: 4.0.9 => 4.0.9
@tarojs/plugin-platform-alipay: 4.0.9 => 4.0.9
@tarojs/plugin-platform-h5: 4.0.9 => 4.0.9
@tarojs/plugin-platform-jd: 4.0.9 => 4.0.9
@tarojs/plugin-platform-qq: 4.0.9 => 4.0.9
@tarojs/plugin-platform-swan: 4.0.9 => 4.0.9
@tarojs/plugin-platform-tt: 4.0.9 => 4.0.9
@tarojs/plugin-platform-weapp: 4.0.9 => 4.0.9
@tarojs/react: 4.0.9 => 4.0.9
@tarojs/runtime: 4.0.9 => 4.0.9
@tarojs/shared: 4.0.9 => 4.0.9
@tarojs/taro: 4.0.9 => 4.0.9
@tarojs/taro-loader: 4.0.9 => 4.0.9
@tarojs/webpack5-runner: 4.0.9 => 4.0.9
babel-preset-taro: 4.0.9 => 4.0.9
eslint-config-taro: 4.0.9 => 4.0.9
react: ^18.0.0 => 18.3.1

其他补充信息

操作系统

win11

软件环境

node: v20.15.1
pnpm: 10.7.0
Taro v4.0.9

模板

使用 react-NutUI（NutUI + React 模板（https://nutui.jd.com/react/）） 创建的项目。

[shengzhou1216]

@nutui/nutui-react-taro 升级到 3.0.7 后，依然无效

[oasis-cloud]

类型为 primary 的 Button 组件，使用的 CSS 变量 和 Scss 变量如下：
--nutui-color-primary-stop1: green;
--nutui-color-primary-stop2: green;

$button-primary-background-color: linear-gradient(
135deg,
$color-primary-stop-1 0%,
$color-primary-stop-2 100%
) !default;

[shengzhou1216]

类型为 primary 的 Button 组件，使用的 CSS 变量 和 Scss 变量如下： --nutui-color-primary-stop1: green; --nutui-color-primary-stop2: green;

$button-primary-background-color: linear-gradient( 135deg, $color-primary-stop-1 0%, $color-primary-stop-2 100% ) !default;

custom_theme.scss:

// 主色调
$button-primary-background-color: blue !default;

config/index.ts:

    sass: {
      resource: [
        path.resolve(__dirname, '..', 'src/assets/styles/custom_theme.scss')
      ],
      // 默认京东 APP 10.0主题 > @import "@nutui/nutui-react-taro/dist/styles/variables.scss";
      data: `@import "@nutui/nutui-react-taro/dist/styles/variables.scss";`
    },

以上配置无效

[oasis-cloud]

发下 babel 配置看看

[shengzhou1216]

重现连接: https://github.com/shengzhou1216/nutui-react-taro-theme-test

// babel-preset-taro 更多选项和默认值：
// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
module.exports = {
  presets: [
    ['taro',
      {
        framework: 'react',
        ts: 'true',
        compiler: 'webpack5',
      }]
  ],
  plugins: [
    [
      "import",
      {
        "libraryName": "@nutui/nutui-react-taro",
        "libraryDirectory": "dist/esm",
        "style": 'css',
        "camel2DashComponentName": false
      },
      'nutui-react-taro'
    ]
  ]
}

[MaxwellEdisons]

同样问题。等解决

[MaxwellEdisons]

@shengzhou1216 放弃吧。一家的东西，示例项目配置乱七八糟，文档也不写清楚，相互矛盾。https://taroify.github.io/taroify.com/introduce/ 好用

[oasis-cloud]

重现连接: shengzhou1216/nutui-react-taro-theme-test

// babel-preset-taro 更多选项和默认值：
// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
module.exports = {
presets: [
['taro',
{
framework: 'react',
ts: 'true',
compiler: 'webpack5',
}]
],
plugins: [
[
"import",
{
"libraryName": "@nutui/nutui-react-taro",
"libraryDirectory": "dist/esm",
"style": 'css',
"camel2DashComponentName": false
},
'nutui-react-taro'
]
]
}

"style": 'css', 改成 "style": true