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

**问题描述**

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

**复现步骤**

```ts
// 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 {
componentDidMount() {}

componentWillUnmount() {}

componentDidShow() {}

componentDidHide() {}

render() {
return (

Hello world!
I need Taro UI
Taro UI 支持 Vue 了吗？

支持

共建？

来


);
}
}
```

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

class App extends Component {
componentDidMount() {}

componentDidShow() {}

componentDidHide() {}

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

export default App;
```

```js
// 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',
],
],
};
```

```ts
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