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

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

Open Qyokizzzz opened this issue 5 months ago • 1 comments

问题描述

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\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\active.scss 5 │ transition: background-color 0.3s; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration ╵ ┌──> node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@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\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\active.scss 5:3 active() node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\accordion.scss 16:5 @import node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\index.scss 7:9 @import node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@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\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\line.scss 2 │ overflow: hidden; │ ^^^^^^^^^^^^^^^^ declaration ╵ ┌──> node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@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\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\line.scss 2:3 line() node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\action-sheet.scss 60:5 @import node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\index.scss 9:9 @import node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\index.scss 12:9 root stylesheet

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

┌──> node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\line.scss 3 │ text-overflow: ellipsis; │ ^^^^^^^^^^^^^^^^^^^^^^^ declaration ╵ ┌──> node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@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\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\line.scss 3:3 line() node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\action-sheet.scss 60:5 @import node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\index.scss 9:9 @import node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\index.scss 12:9 root stylesheet

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

┌──> node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\line.scss 6 │ white-space: nowrap; │ ^^^^^^^^^^^^^^^^^^^ declaration ╵ ┌──> node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@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\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\line.scss 6:5 line() node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\action-sheet.scss 60:5 @import node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\index.scss 9:9 @import node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\index.scss 12:9 root stylesheet

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

┌──> node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\hairline.scss 118│ position: relative; │ ^^^^^^^^^^^^^^^^^^ declaration ╵ ┌──> node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@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\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\mixins\libs\hairline.scss 118:3 hairline-bottom-relative() node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\action-sheet.scss 61:5 @import node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@tarojs+plugin-pl_fnhycj5nhvakigusot6eaumxfm\node_modules\taro-ui\dist\style\components\index.scss 9:9 @import node_modules.pnpm\[email protected]_@[email protected]_@[email protected]_@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

Sep 06 '24 05:09 Qyokizzzz

taro-ui taro-ui copied to clipboard

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

taro-ui
taro-ui copied to clipboard