0

As stated by Rob Dodson, style tags are now unavoidable with Web Components. I am trying to find a way to use LESS with this new tecnhology without having to paste the compiled CSS in my HTML document everytime I change something in the LESS file . Is there anyway to achieve that?

I am using Polymer.

Thanks!

Laurent

Laurent-514
  • 611
  • 1
  • 8
  • 13

6 Answers6

2

You can make the client compile the LESS to CSS , you should definitely take a look at this :

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

It is advised to compile it yourself to css in a production environment though !

developers-have-no-vacation
  • 642
  • 1
  • 5
  • 13
  • Thanks, that might help but what I really need is a solution that might be usable in both production and development environments. I guess I will have to wait. – Laurent-514 Mar 31 '14 at 16:13
2

Doing this client-side hardly seems like the corrent solution, especially at scale. For instance, do you really want 1000 web components in your app all including LessCSS and compiling on the client side?

Just compile server-side and include the compiled version in your html import. Apps like DocPad, make this a lot easier. For instance:

src/documents/components/my-component/my-component.css.less is your source file, and is compiled to out/components/my-component/my-component.css, which is accessible at /compoennt/my-component/my-component.css.

We use this workflow to also make use of javascript pre-processors like coffeescript, as well as post-processors like css auto prefixer, and bundlers like Browserify. See: https://stackoverflow.com/a/23050527/130638 for more info.

Community
  • 1
  • 1
balupton
  • 47,113
  • 32
  • 131
  • 182
1

Simply compile your less and embed the generated CSS file via good old link tag.

I don't think that rob wanted to say that using style tags is the only way to go. You can still link to external stylesheets as you always did.

Pascal Precht
  • 8,803
  • 7
  • 41
  • 53
0

Why don´t you compile on server side using php compiler? Have a look here - http://leafo.net/lessphp/ - To let you know, i´m using this compiler on my projects, on the server side without any kind of problems!!!!!!! :) IMO, it´s better to have the compilation work on the server side. I´m not totally 100% sure, but i think IE8 don´t recognize text/less

Nuno Bentes
  • 1,475
  • 13
  • 26
0

The way I have done this before is have individual .less or .scss file for each component and have it compile into the individual .css file which is then called into the respective component file. and finally vulcanize everything into a single file. Incase you want to use a single CSS file, then use //deep// combinator or ::shadow pseudo elements in the CSS.

If you able to create the custom elements without using ShadowDOM then you can simply have all your less merge into a single CSS. Honestly speaking I was unable to create a wc without shadowDOM in polymer. There is a long conversation on github on enabling / disabling and hacking a way to create a wc without shadowDOM here https://github.com/Polymer/polymer/issues/222

Vinci Rufus
  • 1
0

One solution would be to have the preprocessor translate .less files into .css and then linking them inside Polymer components, like explained in the official documentation: https://www.polymer-project.org/1.0/docs/devguide/styling#external-stylesheets

Unfortunately this is deprecated. So the other way to go could be to have another step that wraps the preprocessor-generated css files with a dom-module: this way you can follow the Polymer way including the style module inside your components, or using the css file compiled from less if you do things outside Polymer components.

I'm using Gulp for my build process and I found this module very useful:

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

It creates, for every .less file I have in my sources, an .html file with a dom-module wrapped around it, ready to be included in the components' styles.

think01
  • 681
  • 1
  • 10
  • 22