drupal插入css,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:  设置的是移除自带的样式。

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