Drupal 8 example: How to render a Twig template and load a CSS file from a Controller

acme.css

.acme-hello-text {
  background-color: #dedede;
}

acme.module

<?php

  function acme_theme() {
    $theme['hello_page'] = [
      'variables' => ['name' => NULL],
      'template' => 'hello'
    ];

    return $theme;
  }

acme.routing.yml

acme_hello:
  path: '/acme/hello/{name}'
  defaults:
    _content: '\Drupal\acme\Controller\DefaultController::hello'
    _title: 'acme Title'
  requirements:
    _permission: 'access content'

DefaultController.php

<?php

namespace Drupal\acme\Controller;

use Drupal\Core\Controller\ControllerBase;

class DefaultController extends ControllerBase 
{

  /**
   * hello
   * @param  string $name
   * @return string
   */
  public function hello($name) 
  {
    return [
      '#theme' => 'hello_page',
      '#name' => $name,
      '#attached' => [ 
        'css' => [
          drupal_get_path('module', 'acme') . '/assets/css/acme.css'
        ]
      ]
    ];
  }
}

hello.html.twig

<div class="acme-hello-text">
  <h1>Hello {{ name }}!</h1>
</div>

Hi,

I am getting an error Uncaught PHP Exception LogicException: "You are not allowed to use css in #attached" at common.inc line 731

Hello, where is the location of hello.html.twig please, I need to create a directory with a specific name for this file ? Thanks.

@AxelBriche: Twig templates must be created at templates directory within the module directory.

@UnnikrishnanBhargavakurup: Attaching css is no longer valid in order to add js/css you need to create a library more information at:

• https://www.drupal.org/developing/api/8/assets
• https://www.lullabot.com/articles/drupal-8-theming-fundamentals-part-1
• https://www.appnovation.com/blog/how-add-js-and-css-assets-drupal-8-theme

Hi, can't we directly render a something from the controller using a twig file rather than sending it to .module file?

I thought it might help people to get the full folder structure so I put together an example module . I also fixed the "not allowed to use css in #attached" by creating a library. I hope this helps a couple people that may have been confused on where the files are supposed to go.

great!!

@ericski thanks man!!

webform.twig.html file in custom module drupal 8 not working.
Thanks in advance

Hey Sr. Olivas! You got me out of a bind. Thank you for this (y por la Consola)!

glad this is still useful @ahernandezsouza