0

正如Rob Dodson 所说，标签style现在在 Web 组件中是不可避免的。我试图找到一种方法来使用这种新技术的 LESS，而不必在每次更改 LESS 文件中的某些内容时将编译后的 CSS 粘贴到我的 HTML 文档中。有没有办法做到这一点？

我正在使用聚合物。

谢谢！

洛朗

4

6 回答 6

1

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

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

于 2014-04-15T21:31:01.000 回答
1

做这个客户端似乎不是正确的解决方案，尤其是在规模上。例如，您真的希望应用程序中有 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.

我们使用这个工作流程还可以使用 javascript 预处理器（如咖啡脚本），以及后处理器（如 css 自动前缀器）和捆绑器（如 Browserify）。有关更多信息，请参阅：https ://stackoverflow.com/a/23050527/130638。

于 2014-04-14T01:27:24.040 回答
1

您可以让客户端将 LESS 编译为 CSS，您一定要看看这个：

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

建议在生产环境中自己编译成 css ！

于 2014-03-31T15:58:28.410 回答
0

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

于 2014-11-19T15:53:05.287 回答
0

我之前这样做的方法是为每个组件设置单独的 .less 或 .scss 文件，并将其编译成单独的 .css 文件，然后将其调用到相应的组件文件中。最后将所有内容硫化成一个文件。如果您想使用单个 CSS 文件，则在 CSS 中使用 //deep// 组合器或 ::shadow 伪元素。

如果您能够在不使用 ShadowDOM 的情况下创建自定义元素，那么您可以简单地将所有 less 合并到一个 CSS 中。老实说，我无法在聚合物中创建没有 shadowDOM 的 wc。github上有一个关于启用/禁用和破解一种在没有shadowDOM的情况下创建wc的方法的长时间对话https://github.com/Polymer/polymer/issues/222

于 2015-05-09T17:14:19.120 回答
0

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

不幸的是，这已被弃用。所以另一种方法可能是有另一个步骤，用 dom-module 包装预处理器生成的 css 文件：这样你可以遵循Polymer 的方式，包括组件中的样式模块，或者使用从 less 编译的 css 文件如果你在 Polymer 组件之外做事。

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

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

它为我的源代码中的每个 .less 文件创建一个 .html 文件，其中包含一个 dom 模块，准备好包含在组件的样式中。

于 2016-11-25T13:32:42.987 回答