AtFlex组件不见了？以及在组件样式内的import问题

[amoydavid]

Taro UI 版本信息

2.2.1

问题描述

AtFlex组件不见了吗？

在2.2.1的代码里有看到AtFlex组件，但在 @types/index.d.ts 目录下并没有看到有引入AtFlex组件，是不用了吗？
如果有这个组件还是挺好的。

不然就要在每个用到flex的组件里都要import整个flex的样式代码，还挺浪费的。微信组件并不能直接使用page里的样式。

复现步骤

复现代码

报错信息

系统信息

Taro v1.3.2

Taro CLI 1.3.2 environment info:
System:
OS: macOS 10.14.5
Shell: 5.3 - /bin/zsh
Binaries:
Node: 11.11.0 - ~/.nvm/versions/node/v11.11.0/bin/node
Yarn: 1.13.0 - ~/.nvm/versions/node/v11.11.0/bin/yarn
npm: 6.7.0 - ~/.nvm/versions/node/v11.11.0/bin/npm
npmPackages:
@tarojs/components: 1.3.2 => 1.3.2
@tarojs/plugin-babel: 1.3.2 => 1.3.2
@tarojs/plugin-csso: 1.3.2 => 1.3.2
@tarojs/plugin-sass: 1.3.2 => 1.3.2
@tarojs/plugin-uglifyjs: 1.3.2 => 1.3.2
@tarojs/router: 1.3.2 => 1.3.2
@tarojs/taro: 1.3.2 => 1.3.2
@tarojs/taro-alipay: 1.3.2 => 1.3.2
@tarojs/taro-h5: 1.3.2 => 1.3.2
@tarojs/taro-swan: 1.3.2 => 1.3.2
@tarojs/taro-tt: 1.3.2 => 1.3.2
@tarojs/taro-weapp: 1.3.2 => 1.3.2
@tarojs/webpack-runner: 1.3.2 => 1.3.2
eslint-config-taro: 1.3.2 => 1.3.2
eslint-plugin-taro: 1.3.2 => 1.3.2
nerv-devtools: ^1.4.0 => 1.4.1
nervjs: ^1.4.0 => 1.4.1

补充信息

另外也有样式import的问题，详见二楼评论

#658 (comment)

[koppthe]

AtFlex 组件很早之前就移除了，可以在 app.css 全局样式中引入 at-flex 的样式

[amoydavid]

但如果在组件里用下面的代码就可能有代码重复之感

方式1. 在 component.scss 里

@import '../../app.scss'

这样的话 component.wxss 会有一份完整的 '../../app.scss' 文件的代码，对空间是浪费的

方式2. 在 component.scss 里

@import '../../app.css'

这样的话 component.wxss 里是一个 @import 但app.css在小程序端是不存在的。。

方式3. 在 component.scss 里

@import '../../app.wxss'

这样的话编译报错。

我希望的是

@import '../../app.wxss'

这个能支持，这样组件内就不要重复写入样式，包的空间会降下来。

[koppthe]

表述的很清楚👍

@import '../../app.wxss'

因为 taro 需要做多端编译，所以一开始并不支持这种样式导入的写法，可以到 taro 仓库下提一个 feature request

确认了一下，是支持的，只是需要手动把需要复用的样式改成 wxss。

[amoydavid]

表述的很清楚👍

@import '../../app.wxss'

因为 taro 需要做多端编译，所以一开始并不支持这种样式导入的写法，可以到 taro 仓库下提一个 feature request

确认了一下，是支持的，只是需要手动把需要复用的样式改成 wxss。

但我试的时候在component.scss里使用 @import '../../app.wxss' 的时候，保存就报错了。
app.scss位置是正确的。改成scss是对的，但就把整个文件引进来了。
但 css 和 wxss 的确都有问题。

修改  样式文件  src/component.wxss 
{ Error: File to import not found or unreadable: ../../app.wxss.
    at Object.module.exports.renderSync (/Users/amoydavid/project/node_modules/node-sass/lib/index.js:439:16)
    at Promise (/PROJECT_PATH/node_modules/@tarojs/plugin-sass/index.js:37:21)
    at new Promise (<anonymous>)
    at compileSass (/PROJECT_PATH/node_modules/@tarojs/plugin-sass/index.js:5:10)
    at Object.<anonymous> (/Users/amoydavid/.config/yarn/global/node_modules/@tarojs/cli/dist/util/npm.js:133:12)
    at Generator.next (<anonymous>)
    at fulfilled (/Users/amoydavid/.config/yarn/global/node_modules/@tarojs/cli/dist/util/npm.js:4:58)
    at processTicksAndRejections (internal/process/next_tick.js:81:5)
  status: 1,
  file:
   'PATH_TO/component.scss',
  line: 1,
  column: 1,
  message: 'File to import not found or unreadable: ../../app.wxss.',
  formatted:
   'Error: File to import not found or unreadable: ../../app.wxss.\n        on line 1 of src/component.scss\n>> @import "../../app.wxss"\n\n   ^\n' }
(node:75861) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'css' of undefined
    at /Users/amoydavid/.config/yarn/global/node_modules/@tarojs/cli/dist/mini/compileStyle.js:157:28

[amoydavid]

发现了，如果把 component.scss 文件改为 component.wxss 就可以正常使用 @import '../../app.wxss' 了。
但我觉得还是应该能自动处理这件事比较好。毕竟每个平台写一个样式文件不是漂亮的解决方案。我去提个 feature request