希望能支持组件样式内 import 全局样式

[amoydavid]

详见此issus jd-opensource/taro-ui#658

有两个样式，组件的样式 component.scss 全局的样式 'app.scss'

我希望是能在组件样式里直接 @import 全局的样式库。所以有了如下尝试。

我在组件样式component.scss内 @import '../../app.scss'，但直接这样的代码会把整个app.scss编译后放到component.wxss 文件内，并不是我最想要的结果。
如果使用 @import '../../app.css' 那么编译后的代码是 @import '../../app.css'，微信小程序这块就是错的。 如果使用 @import '../../app.wxss`，编译会出错。

如果把 component.scss 的文件名改成 component.wxss，并在jsx里import这个wxss，那么在wxss里使用 @import '../../app.wxss' 得到了正确的结果。

是不是能在component.scss里能直接 @import 'path/to/other.wxss' 或是有更优的方案？

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[Garfield550]

全局样式最好不要在页面内或者组件样式内引用。

[amoydavid]

但怎么实现 flex 这个taro-ui里的样式只要写一次，其他地方用 import 就可以。问题一样。

…

---原始邮件--- 发件人: "Garfield Lee"<[email protected]> 发送时间: 2019年7月1日(星期一) 中午1:28 收件人: "NervJS/taro"<[email protected]>; 抄送: "Author"<[email protected]>;"Wei Liu"<[email protected]>; 主题: Re: [NervJS/taro] 希望能支持组件样式内 import 全局样式 (#3595) 全局样式最好不要在页面内或者组件样式内引用。 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[Garfield550]

由于 app.js 添加的样式文件 在小程序上只能影响 page 样式,不能影响 component 的样式，所以在使用自定义组件时，你可能需要再次引入

Ref: https://taro-ui.aotu.io/#/docs/flex

除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。

Ref: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

[amoydavid]

但我可能多个组件里都用到 flex 样式，但每个组件都把整个样式都写入到样式的wxss里不靠谱，应该用import flex样式才对。然后flex样式只需要写一次。

…

---原始邮件--- 发件人: "Garfield Lee"<[email protected]> 发送时间: 2019年7月1日(星期一) 下午4:01 收件人: "NervJS/taro"<[email protected]>; 抄送: "Author"<[email protected]>;"Wei Liu"<[email protected]>; 主题: Re: [NervJS/taro] 希望能支持组件样式内 import 全局样式 (#3595) 由于 app.js 添加的样式文件 在小程序上只能影响 page 样式,不能影响 component 的样式，所以在使用自定义组件时，你可能需要再次引入 Ref: https://taro-ui.aotu.io/#/docs/flex 除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。 Ref: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[Garfield550]

微信限制，没有办法啊。

除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效

折衷方案也只能是在每个用到 Flex 的地方 @import "~taro-ui/dist/style/components/flex.scss"; 一下

[Garfield550]

另外，可以试试 addGlobalClass，看看这么做能不能在 Component 写 className='at-row' 并应用样式。

此外，小程序基础库版本 2.2.3 以上支持 addGlobalClass 选项，即在 Component 的 options 中设置 addGlobalClass: true 。 这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效。

Ref: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

使用外部样式类可以让组件使用指定的组件外样式类，如果希望组件外样式类能够完全影响组件内部，可以将组件构造器中的 options.addGlobalClass 字段置为 true。这个特性从小程序基础库版本 2.2.3 开始支持。

Ref: https://nervjs.github.io/taro/docs/component-style.html#%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F%E7%B1%BB

[amoydavid]

实际的场景更可能是这样的。
我基于taro-ui实现了一些组件，这些组件多次用到了flex的样式。我比较希望只要写一次flex的样式，其它地方用import进来。这样样式统一，也会减小包的体积，对吧。

用 addGlobalClass 对于taro来说应该不是最佳方案。

[snakeUni]

我现在在按照 Taro UI 来文件结构在写组件库，但是我在 app.tsx 中设置了 addGlobalClass: true 是无效的，在每个组件中也设置了这个选项
app.tsx

class App extends Component {
  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  static options = {
    addGlobalClass: true
  }
 ....
}

每个组件都继承了这个组件

export default class BeastComponent<P = {}, S = {}> extends Component<P, S> {
  static options = {
    addGlobalClass: true
  }
}

在页面上组件外部样式无法覆盖内部的样式