Drupal 8 Theme - Cannot attach CSS files

By oplek on 16 Jun 2016 at 17:19 UTC

I'm new to D8, and am trying to create a new theme. I'm stuck on trying to simply add a CSS file/reference globally. I'm following the directions here, and about a dozen other sites trying to describe the same thing.

Notes:

I'm using Drupal 8.1.3
Yes, I'm flushing the Drupal cache after every change/attempt.
Yes, my theme "roatheme" is installed and running. I have theme suggestion .twig files that are responding to changes.
Yes, the CSS files do exist, do have content, are placed in the correct directory, and are spelled correctly (copy/pasted right out of FTP):
- themes/roatheme/css/landing.css
- themes/roatheme/css/layout.css
It's a mostly-fresh install of Drupal. I used Drush to uninstall the contributed modules, in case one of them was doing something, and flushing cache. No change.
Logging isn't showing any errors, other than a 404 (see below) error.

My theme is sitting in themes/roatheme

roatheme.info.yml

name: ROA
type: theme
description: ''
package: roatheme
core: '8.x'
libraries:
  - roatheme/global-styles
  - roatheme/landing-pages
regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  highlighted: Highlighted
  featured_top: 'Featured top'
  breadcrumb: Breadcrumb
  content: Content

roatheme.libraries.yml

global-styles:
  version: 1.0
  css:
    theme:
      - css/layout.css: {}
landing-pages:
  version: 1.0
  css:
    theme:
      - css/landing.css: {}
  dependencies:
    - core/jquery

roatheme.theme

use Drupal\Core\Template\Attribute;

function roatheme_preprocess_html(&$v) {
	$v['tpath'] = base_path() . 'themes/roatheme/';
	
	$v['#attached']['library'][] = 'roatheme/landing-pages';
	\Drupal::logger('roa')->notice('roatheme_preprocess_html');	
}

function roatheme_preprocess_page(&$v) {
	$v['tpath'] = base_path() . 'themes/roatheme/';	

}

function roatheme_preprocess_node(&$v) {
	$v['tpath'] = base_path() . 'themes/roatheme/';

	if ( $v['node']->getType() == 'landing_page' ) {
		 //$v['#attached']['library'][] = 'roatheme/landing-pages';
	}
	
	\Drupal::logger('roa')->notice('roatheme_preprocess_node');	
}

... there's a few attempts to try to attach the libraries, which had no effect. (I've confirmed these functions are running, hence the logging functions). I even tried the {{ attach_library(blah blah) }} token... no change.

My html.html.twig file (it's a bit stripped down at the moment):

{#
/**
 * @file
 * Default theme implementation for the basic structure of a single Drupal page.
 *
 * Variables:
 * - logged_in: A flag indicating if user is logged in.
 * - root_path: The root path of the current page (e.g., node, admin, user).
 * - node_type: The content type for the current node, if the page is a node.
 * - head_title: List of text elements that make up the head_title variable.
 *   May contain or more of the following:
 *   - title: The title of the page.
 *   - name: The name of the site.
 *   - slogan: The slogan of the site.
 * - page_top: Initial rendered markup. This should be printed before 'page'.
 * - page: The rendered page markup.
 * - page_bottom: Closing rendered markup. This variable should be printed after
 *   'page'.
 * - db_offline: A flag indicating if the database is offline.
 * - placeholder_token: The token for generating head, css, js and js-bottom
 *   placeholders.
 *
 * @see template_preprocess_html()
 *
 * @ingroup themeable
 */
#}
<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
	
    <js-placeholder token="{{ placeholder_token|raw }}">
	
	
	<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	
	
  </head>
  <body{{ attributes }}>


   
				{{ page_top }}
				{{ page }}
				{{ page_bottom }}
	
	
	
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
</html>

I expected that the two css files would be referenced... .instead what I see rendered is this:

<style media="all">
@import url("/themes/roatheme/0?o8vhlj");
</style>

... where it's HTML of a page (404 not found).

I've even spent a couple hours trying to trace through the Core code.

In the file "core\lib\Drupal\Core\Asset\LibraryDiscoveryParser.php", function "parseLibraryInfo", I can see that the CSS files are mentioned... but they apparently are removed at some point (I've since restored core back to factory state)

At this point I'm completely stumped, and an open to ideas. I don't think attaching a CSS file was supposed to take 10 hours, and counting.

Comments

Syntax error in yml

Jeff Burnz commented 16 June 2016 at 21:08

..which IMO should have thrown an exception, but there are quite a few silent fails with yml files:

global-styles:
  version: 1.0
  css:
    theme:
      css/layout.css: {}
landing-pages:
  version: 1.0
  css:
    theme:
      css/landing.css: {}
  dependencies:
    - core/jquery

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.