drupal8 自定义主题开发——导入自定义css和js

第一步：创建主题文件夹，如example，并在文件夹下创建两个yml文件，命名为：example.info.yml 和example.libraries.yml。此处需特别注意：themes文件夹下不要创建html.html.twig模板文件，否则，将无法导入。我在这个地方，卡了一下午，才弄清楚，themes文件夹下，只能覆写区块模板。

第二步：info文件中写入主题定义的键值对，libraries文件中写入导入css和js 的键值对

example.info.yml文件内容如下：

name: Coll2018
description: collquium的2018主题
type: theme
core: 8.x
base theme: false

regions:
header: Header
sidebar_first: 'Sidebar first'
content: Content
footer_first: Footer

libraries:
  - Coll2018/global-styling

stylesheets-remove:
  - core/themes/stable/css/views/views.module.css
  - core/themes/stable/css/system/components/tree-child.module.css
  - core/themes/stable/css/system/components/tablesort.module.css
  - core/themes/stable/css/system/components/tabledrag.module.css
  - core/themes/stable/css/system/components/sticky-header.module.css
  - core/themes/stable/css/system/components/resize.module.css
  - core/themes/stable/css/system/components/reset-appearance.module.css
  - core/themes/stable/css/system/components/progress.module.css
  - core/themes/stable/css/system/components/position-container.module.css
  - core/themes/stable/css/system/components/nowrap.module.css
  - core/themes/stable/css/system/components/js.module.css
  - core/themes/stable/css/system/components/item-list.module.css
  - core/themes/stable/css/system/components/hidden.module.css
  - core/themes/stable/css/system/components/details.module.css
  - core/themes/stable/css/system/components/clearfix.module.css
  - core/themes/stable/css/system/components/container-inline.module.css
  - core/themes/stable/css/system/components/fieldgroup.module.css
  - core/themes/stable/css/system/components/autocomplete-loading.module.css
  - core/themes/stable/css/system/components/align.module.css
  - core/themes/stable/css/system/components/ajax-progress.module.css
  - core/modules/views/css/views.module.css
  - core/modules/system/css/components/tree-child.module.css
  - core/modules/system/css/components/ajax-progress.module.css
  - core/modules/system/css/components/align.module.css
  - core/modules/system/css/components/autocomplete-loading.module.css
  - core/modules/system/css/components/fieldgroup.module.css
  - core/modules/system/css/components/container-inline.module.css
  - core/modules/system/css/components/clearfix.module.css
  - core/modules/system/css/components/details.module.css
  - core/modules/system/css/components/hidden.module.css
  - core/modules/system/css/components/item-list.module.css
  - core/modules/system/css/components/js.module.css
  - core/modules/system/css/components/nowrap.module.css
  - core/modules/system/css/components/position-container.module.css
  - core/modules/system/css/components/progress.module.css
  - core/modules/system/css/components/reset-appearance.module.css
  - core/modules/system/css/components/resize.module.css
  - core/modules/system/css/components/sticky-header.module.css
  - core/modules/system/css/components/system-status-counter.css
  - core/modules/system/css/components/system-status-report-counters.css
  - core/modules/system/css/components/system-status-report-general-info.css
  - core/modules/system/css/components/tabledrag.module.css
  - core/modules/system/css/components/tablesort.module.css

regions:
  header: Header
  content: Content
  sidebar_first: 'Sidebar bar'
  footer_first: Footer

example.libraries.yml 的内容如下：

global-styling:
  css:
    theme:
      css/bootstrap.css: {}
      css/colloquium.css: {}
  header: true
  js:
    js/jquery-3.2.1.js: {}
    js/bootstrap.js: {}

其中，header： true的作用是将js文件放置到页面的head中，drupal默认放入底部。

stylesheets-remove:  设置的是移除自带的样式。

另外，注意每行缩进使用空格，冒号和小横线后面都有一个空格。