Taro: 关于全局样式的问题（更新到 1.0.0-beta.14 后组件样式报错）

[vimcaw]

问题描述
在src/app.scss中我使用了一些标签选择器和属性选择器来制定一些全局样式，但是更新到 1.0.0-beta.14 后，会自动在每个组件的样式文件中引入编译后的 app.wxss，而微信小程序目前不支持在自定义组件中使用标签选择器、ID选择器、属性选择器，所以引发报错并忽略组件样式文件。

复现步骤

1. 在src/app.scss中使用了一些标签选择器、ID选择器或属性选择器
2. 编写一个自定义组件
3. 编译

期望行为
我认为不应该直接引入src/app.scss文件，或者至少加一个配置可以关掉，因为全局样式里经常会使用标签选择器和属性选择器，那样直接把全局样式引入自定义组件样式里会报错并忽略整个文件。

这两种方法可以代替直接引入src/app.scss文件来解决全局样式的问题：

1. 直接启用全局样式类 ，也就是将组件构造器中的options.addGlobalClass字段置为true，这样外部的样式就会影响到这个自定义组件。

但是这样存在外部非全局样式污染组件样式的风险，比如在一个自定义组件里对某个元素设置了样式，而在引入它的页面使用了元素选择器或者有个另外的元素跟它类名一样，就可能会覆盖掉组件的样式。

当然通过良好的命名可以避免这种问题，而且小程序自定义组件内部的样式只对组件内元素有效，而页面样式也仅对当前页面有效，已经极大的降低了样式污染的几率。

1. 可以使用小程序自定义组件的外部样式类或全局样式类，给每个自定义组件添加一个类名（比如组件名），然后改为 app.scss中自动引入组件名。

比如：有两个自定义组件search和cell，

而全局样式文件src/app.scss内容为：

Text {
  font-size: 20px;
  color: #444;
}
.block {
  padding: 20px 40px;
}

然后给每个自定义组件添加一个外部样式类或全局样式类，类名就是component-+组件名。

最后把src/app.scss先预处理为以下格式再编译：

.component-search,
.component-cell {
  Text {
    font-size: 20px;
    color: #444;
  }
  .block {
    padding: 20px 40px;
  }
}

这样就只有全局样式才能影响组件的样式了，而其它地方的局部样式（页面样式）就不会影响到组件内部。

1. 自动给每个元素及一些常用的属性（比如disabled）添加一个类名，然后把标签选择器和属性选择器修改为类名选择器。

比如：

<Button disabled>禁用按钮</Button>

和

Button[disabled] {
  background: #e8e8e8;
  color: #c9c9c9;
}

编译成：

<button class="button disabled" disabled>禁用按钮</button>

和

.button.disabled {
  background: #e8e8e8;
  color: #c9c9c9;
}

不过当属性是动态改变时可能会很难弄。

报错信息

VM1089:2 Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(./components/Loading/index.wxss:159:10)This wxss file is ignored.

系统信息

• 操作系统: Windows 10
  
  
  
  • Taro 版本 v1.0.0-beta.14
  
  
  • Node.js 版本 v8.11.2
  
  

[luckyadam]

@vimcaw 我看了一下全局样式类的说明，将组件构造器中的options.addGlobalClass字段置为true就可以直接受外部样式影响了，应该就不用做 issue 中提到的样式编译操作了吧

其实组件默认引 app.wxss 的目的，就是为了让组件能够受全局样式的影响

[vimcaw]

@luckyadam 但是全局样式经常会使用标签选择器和属性选择器，而自定义组件不支持这些选择器，那样直接引用app.wxss就会报错并忽略整个样式文件了，所以我想通过外部样式类或全局样式类转而在组件外部定义全局样式，那样就可以使用标签选择器和属性选择器了。

[luckyadam]

@vimcaw 恩，beta.15 去掉了直接 import app.wxss 的功能，增加了组件 static options 的支持，方案一我觉得可以的，后续可以加入支持~

[vimcaw]

@luckyadam 非常感谢！options.addGlobalClass 字段置为true后，全局样式已经可以影响到自定义组件了。

[luckyadam]

426