Libraries in custom module

Question

I have the following 2 files in 2 different directoties in a custom module directory.

modules/custom/calculator

This is my info.yml file (calculator.info.yml)

name: calculator
type: module
description: Calculator
core: 8.x
package: Custom

My css is in the directory modules/custom/calculator/css and js in the modules/custom/calculator/js directory

My libaries file is this: (calculator.libraries.yml)

base-style:
  version: VERSION
  css:
    component:
      css/wunderpage.css: {}
  js:
    js/wunderpage.js: {}
    js/jquery.matchHeight-min.js: {}

I also have a calculator.module file :

<?php

/**
 * @file
 * Contains calculator.module..
 */

use Drupal\Core\Routing\RouteMatchInterface;

/**
 * Implements hook_help().
 */
function calculator_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    // Main module help for the calculator module.
    case 'help.page.calculator':
      $output = '';
      $output .= '<h3>' . t('About') . '</h3>';
      $output .= '<p>' . t('Calculator') . '</p>';
      return $output;

    default:
  }

  function calculator_preprocess_page(&$variables) {
    $variables['#attached']['library'][] = 'calculator/base-style';
  }
}

Still my css and js etc is not being loaded.

Somebody knows why my libraries are not being loaded?

Answer 1

Either you made a mistake when copying and pasting that PHP code, or you defined calculator_preprocess_page() as being inside calculator_help(). Also, as Ivan Jaros also pointed out, Drupal 8 requires you to use hook_page_attachments() to attach page-level assets.

I do recommend you add these assets elsewhere in the code, preferably in the render array you build that actually needs the library.