使用较少的Web组件

Question

Rob Dodson的stated，style标签现在不可避免地与Web组件一起使用。我试图找到一种方法来使用LESS与这个新的技术，而不必每次我在LESS文件中更改某些内容时将编译的CSS粘贴到我的HTML文档中。反正有没有实现这个目标？

我正在使用Polymer。

谢谢！

劳伦

Answer 1

你可以让客户端编译LESS到CSS，你一定要看看这个：

http://lesscss.org/#client-side-usage

建议您自己将其编译为生产环境中的css！

Answer 2

做这个客户端似乎不是正确的解决方案，特别是在规模上。例如，您真的希望应用程序中包含1000个Web组件，包括LessCSS和客户端编译吗？

只需编译服务器端并在html导入中包含已编译的版本。像DocPad这样的应用程序让这更容易。例如：

src/documents/components/my-component/my-component.css.less是您的源文件，并已编译为out/components/my-component/my-component.css，可在/compoennt/my-component/my-component.css访问。

我们使用此工作流程也可以使用像coffeescript这样的javascript预处理器，以及像css auto prefixer这样的后处理器，以及像Browserify这样的捆绑器。有关详细信息，请参阅：https://stackoverflow.com/a/23050527/130638。

Answer 3

只需编译你的less并通过良好的旧链接标记嵌入生成的CSS文件。

我不认为rob想说使用样式标签是唯一的方法。您仍然可以像往常一样链接到外部样式表。

Answer 4

为什么不使用php编译器在服务器端编译？看看这里 - http://leafo.net/lessphp/ - 为了让你知道，我在我的项目上使用这个编译器，在服务器端没有任何问题!!!!!!! :) IMO，最好在服务器端进行编译工作。我不是完全100％肯定，但我认为IE8不识别文字/更少

Answer 5

我之前完成此操作的方法是为每个组件提供单独的.less或.scss文件，并将其编译到单独的.css文件中，然后将其调用到相应的组件文件中。最后将所有东西硫化成一个文件。 如果你想使用一个CSS文件，那么在CSS中使用//深// combinator或:: shadow伪元素。

如果您能够在不使用ShadowDOM的情况下创建自定义元素，那么您可以将所有较少的内容合并到一个CSS中。 老实说，我无法在聚合物中创建没有shadowDOM的wc。关于启用/禁用和黑客攻击创建没有shadowDOM的wc的方法，github上有一个很长的对话https://github.com/Polymer/polymer/issues/222

Answer 6

一种解决方案是让预处理器将.less文件转换为.css，然后将它们链接到Polymer组件中，如官方文档中所述：https://www.polymer-project.org/1.0/docs/devguide/styling#external-stylesheets

不幸的是，这已被弃用。所以另一种方法可能是让另一个步骤用dom-module包装预处理器生成的css文件：这样你就可以跟随the Polymer way包括组件内的样式模块，或者使用编译的css文件如果你在聚合物组件之外做事，那就少了。

我正在使用Gulp进行构建过程，我发现这个模块非常有用：

https://github.com/MaKleSoft/gulp-style-modules

它为我的源代码中的每个.less文件创建了一个带有dom-module的.html文件，随时可以包含在组件的样式中。