按照#1726里的说明进行了配置，但是仍然无法显示样式

[Qyokizzzz]

问题描述

pnpm，vite，taro-ui模板，试了weapp和h5都不显示样式
按照#1726里的说明进行了配置，但是仍然无法显示样式
并且全局引入会导致编译报错，试了方式 2： 通过 babel 插件按需引入组件也不显示样式

复现步骤

// pages/index/index.tsx
import { Component, PropsWithChildren } from 'react';
import { View, Text } from '@tarojs/components';
import { AtButton } from 'taro-ui';

import './index.scss';

export default class Index extends Component<PropsWithChildren> {
  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    return (
      <View className="<%= pageName %>">
        <Text>Hello world!</Text>
        <AtButton type="primary">I need Taro UI</AtButton>
        <Text>Taro UI 支持 Vue 了吗？</Text>
        <AtButton type="primary" circle={true}>
          支持
        </AtButton>
        <Text>共建？</Text>
        <AtButton type="secondary" circle={true}>
          来
        </AtButton>
      </View>
    );
  }
}

// app.ts
import { Component, PropsWithChildren } from 'react';
import 'taro-ui/dist/style/index.scss';
import './app.scss';

class App extends Component<PropsWithChildren> {
  componentDidMount() {}

  componentDidShow() {}

  componentDidHide() {}

  // this.props.children 是将要会渲染的页面
  render() {
    return this.props.children;
  }
}

export default App;

// babel.config.js
module.exports = {
  presets: [
    [
      'taro',
      {
        framework: 'react',
        ts: true,
        compiler: 'vite',
      },
    ],
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'taro-ui',
        customName: (name) => `taro-ui/lib/components/${name.slice(3)}`,
        customStyleName: (name) => `taro-ui/dist/style/components/${name.slice(3)}.scss`,
      },
      'taro-ui',
    ],
  ],
};

import { defineConfig, type UserConfigExport } from '@tarojs/cli';
import devConfig from './dev';
import prodConfig from './prod';

// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
export default defineConfig<'vite'>(async (merge, { command, mode }) => {
  const baseConfig: UserConfigExport<'vite'> = {
    projectName: 'demo',
    date: '2024-9-5',
    designWidth: 750,
    deviceRatio: {
      640: 2.34 / 2,
      750: 1,
      375: 2,
      828: 1.81 / 2,
    },
    sourceRoot: 'src',
    outputRoot: 'dist',
    plugins: [],
    defineConstants: {},
    copy: {
      patterns: [],
      options: {},
    },
    framework: 'react',
    compiler: {
      type: 'vite',
      prebundle: {
        exclude: ['taro-ui'],
      },
    },
    mini: {
      postcss: {
        pxtransform: {
          enable: true,
          config: {},
        },
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module
            generateScopedName: '[name]__[local]___[hash:base64:5]',
          },
        },
      },
    },
    h5: {
      publicPath: '/',
      staticDirectory: 'static',

      miniCssExtractPluginOption: {
        ignoreOrder: true,
        filename: 'css/[name].[hash].css',
        chunkFilename: 'css/[name].[chunkhash].css',
      },
      postcss: {
        autoprefixer: {
          enable: true,
          config: {},
        },
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module
            generateScopedName: '[name]__[local]___[hash:base64:5]',
          },
        },
      },
    },
    rn: {
      appName: 'taroDemo',
      postcss: {
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        },
      },
    },
  };
  if (process.env.NODE_ENV === 'development') {
    // 本地开发构建配置（不混淆压缩）
    return merge({}, baseConfig, devConfig);
  }
  // 生产构建配置（默认开启压缩混淆等）
  return merge({}, baseConfig, prodConfig);
});

期望行为
显示样式

报错信息
More info: https://sass-lang.com/d/mixed-decls

┌──> node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\active.scss
5 │ transition: background-color 0.3s;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\hairline.scss
62 │ ┌ &::after {
63 │ │ @include hairline-base($color, $style);
64 │ │
65 │ │ border-bottom-width: $width;
66 │ │ }
│ └─── nested rule
╵
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\active.scss 5:3 active()
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\accordion.scss 16:5 @import
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\index.scss 7:9 @import
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\index.scss 12:9 root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

┌──> node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\line.scss
2 │ overflow: hidden;
│ ^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\active.scss
7 │ ┌ &:active {
8 │ │ background-color: $color-grey-5;
9 │ │ }
│ └─── nested rule
╵
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\line.scss 2:3 line()
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\action-sheet.scss 60:5 @import
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\index.scss 9:9 @import
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\index.scss 12:9 root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

┌──> node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\line.scss
3 │ text-overflow: ellipsis;
│ ^^^^^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\active.scss
7 │ ┌ &:active {
8 │ │ background-color: $color-grey-5;
9 │ │ }
│ └─── nested rule
╵
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\line.scss 3:3 line()
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\action-sheet.scss 60:5 @import
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\index.scss 9:9 @import
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\index.scss 12:9 root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

┌──> node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\line.scss
6 │ white-space: nowrap;
│ ^^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\active.scss
7 │ ┌ &:active {
8 │ │ background-color: $color-grey-5;
9 │ │ }
│ └─── nested rule
╵
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\line.scss 6:5 line()
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\action-sheet.scss 60:5 @import
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\index.scss 9:9 @import
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\index.scss 12:9 root stylesheet

Deprecation Warning: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

More info: https://sass-lang.com/d/mixed-decls

┌──> node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\hairline.scss
118│ position: relative;
│ ^^^^^^^^^^^^^^^^^^ declaration
╵
┌──> node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\active.scss
7 │ ┌ &:active {
8 │ │ background-color: $color-grey-5;
9 │ │ }
│ └─── nested rule
╵
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\hairline.scss 118:3 hairline-bottom-relative()
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\action-sheet.scss 61:5 @import
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\index.scss 9:9 @import
node_modules.pnpm\taro-ui@3.3.0_@tarojs+components@4.0.5_@tarojs+plugin-platform-alipay@4.0.5_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\index.scss 12:9 root stylesheet

Warning: 35 repetitive deprecation warnings omitted.

系统信息
Taro CLI 4.0.5 environment info:
System:
OS: Windows 11 10.0.22631
Binaries:
Node: 18.17.1 - D:\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 10.8.0 - D:\nodejs\npm.CMD
npmPackages:
@tarojs/cli: 4.0.5 => 4.0.5
@tarojs/components: 4.0.5 => 4.0.5
@tarojs/helper: 4.0.5 => 4.0.5
@tarojs/plugin-framework-react: 4.0.5 => 4.0.5
@tarojs/plugin-platform-alipay: 4.0.5 => 4.0.5
@tarojs/plugin-platform-h5: 4.0.5 => 4.0.5
@tarojs/plugin-platform-jd: 4.0.5 => 4.0.5
@tarojs/plugin-platform-qq: 4.0.5 => 4.0.5
@tarojs/plugin-platform-swan: 4.0.5 => 4.0.5
@tarojs/plugin-platform-tt: 4.0.5 => 4.0.5
@tarojs/plugin-platform-weapp: 4.0.5 => 4.0.5
@tarojs/react: 4.0.5 => 4.0.5
@tarojs/runtime: 4.0.5 => 4.0.5
@tarojs/shared: 4.0.5 => 4.0.5
@tarojs/taro: 4.0.5 => 4.0.5
@tarojs/vite-runner: 4.0.5 => 4.0.5
babel-preset-taro: 4.0.5 => 4.0.5
eslint-config-taro: 4.0.5 => 4.0.5
react: ^18.0.0 => 18.3.1
taro-ui: ^3.2.1 => 3.3.0

[taro-ui-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~