search

NervJS / taro-ui

一款基于 Taro 框架开发的多端 UI 组件库
https://taro-ui.taro.zone
MIT License
4.56k stars 752 forks source link

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

Open Qyokizzzz opened 3 months ago

Qyokizzzz commented 3 months ago

问题描述

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

┌──> nodemodules.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 ╵ ┌──> nodemodules.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 ╵ nodemodules.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() nodemodules.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 nodemodules.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 nodemodules.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

┌──> nodemodules.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 ╵ ┌──> nodemodules.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 ╵ nodemodules.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() nodemodules.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 nodemodules.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 nodemodules.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

┌──> nodemodules.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 ╵ ┌──> nodemodules.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 ╵ nodemodules.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() nodemodules.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 nodemodules.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 nodemodules.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

┌──> nodemodules.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 ╵ ┌──> nodemodules.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 ╵ nodemodules.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() nodemodules.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 nodemodules.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 nodemodules.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

┌──> nodemodules.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 ╵ ┌──> nodemodules.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 ╵ nodemodules.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() nodemodules.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 nodemodules.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 nodemodules.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[bot] commented 3 months ago

欢迎提交 Issue~

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

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

Good luck and happy coding~

C-L-STARK commented 1 month ago
image

这样操作哦 ~

C-L-STARK commented 1 month ago

根据你具体引入的包来哦 ~