如果自定义组件导出默认class和其他变量,则在页面中引用并使用该组件的变量,会导致组件样式完全丢失



  • 项目背景:Taro-cli生成项目, 使用typescript + less + 默认模版

    问题描述:在一个自定义组件中,export一个class和一个普通object。在页面中import这个组件的class和普通object,如果普通object未被使用,则一切正常;如果普通object被使用(如console.log),则组件的样式完全丢失。

    事例代码

    // 组件文件 test-comp/index.tsx 和 test-comp/index.less

    // index.tsx
    import './index.less'
    
    export const MyObj = { name: 'abc' }
    
    export default class TestComp extends Component {
      render() {
        return (<View className='test-comp'>Test Component</View>)
      }
    }
    
    // index.less
    .test-comp {
      width: 100%;
      height: 200px;
      background-color: green;
    }
    

    // 页面文件 index/index.tsx

    // index.tsx
    import TestComp, { MyObj } from '@/components/test-comp'
    
    // IMPORTANT !!!
    // 这一句将导致TestComp样式完全不工作
    // 如果不使用MyObj则样式正常工作
    console.log(MyObj) 
    
    export default class Index extends Component {
      render() {
        return (<TestComp />)
      }
    }
    

    重现步骤

    1. 下载头条开发者工具
    2. npm run dev:tt
    3. 导入dist目录
    4. 如果执行 console.log(MyObj)则样式丢失 (需要重新npm run dev:tt并重启开发者工具才能重现
    5. 如果注释 console.log(MyObj)则样式正常

    初步调查结果:

    发现两种场景下 test-comp 编译结果差别巨大,使用了 MyObj 的情况下,编译出来的 test-comp 没有引入相应的index.less。不使用 MyObj 则一切正常


登录后回复