如果自定义组件导出默认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 />) } }
重现步骤:
- 下载头条开发者工具
npm run dev:tt
- 导入dist目录
- 如果执行
console.log(MyObj)
则样式丢失 (需要重新npm run dev:tt
并重启开发者工具才能重现) - 如果注释
console.log(MyObj)
则样式正常
初步调查结果:
发现两种场景下 test-comp 编译结果差别巨大,使用了 MyObj 的情况下,编译出来的 test-comp 没有引入相应的
index.less
。不使用 MyObj 则一切正常