Docs Wvm Template Directives Styles

Template directive: styles

The @styles has a parent relationship with @style() directive. The main function is that it is being used to pull all css imports to one single places within a template page. This means that all @style() imports are placed into one single space line after line.
Syntax:
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>>

      @styles

    </head>
    <body>

        @style('some/css/layout:one')

          <-- some html code here ... -->        
          
        @style('some/css/layout:two')

    </body>
  </html>
  @styles
From the above, all css styles will be imported to where the @styles directive was declared. This saves a lot of time when debugging css files, making it easier to locate css imported styles. Also, each style tag is supplied a "rel" attribute that provides a pointer assistance to the styles imported.