用drupal8.7.6开发自定义主题时，静态页中Css、Javascript导入drupal的库文件是必然会遇到的操作之一。下面，白龙网为大家分享一个相关案例及其解决方案。
Css、Javascript通过drupal指定的info.yml文件加载，前端页面解析后，源代码中正常显示了所有Css、Javascript文件，但是前端页面中的轮播图片不能轮播，Tab切换按钮不能切换，即所有使用Javascript实现的动态交互效果都失效了。
变通了下，直接把所有的Css、Javascript文件放到模板文件中，前端页面解析后，轮播图片可以正常轮播，Tab切换按钮可以正常切换了，即所有使用Javascript实现的动态交互效果都正常了。但是，这种玩法是不规范的，一般Css、Javascript文件都是要通过drupal指定的info.yml文件加载的。
基于上述问题，结合审查元素时控制台的Javascript报错提示，基本可以断定是jquery没有加载成功；然后，检查了失去交互效果的轮播图片、Tab切换按钮代码，发现两个模块中都有jquery的调用，而源代码中jquery组件被drupal放到了代码最后、</body>之前。即：轮播图片、Tab切换按钮中的jquery调用在前，而jquery组件及其相关变量的定义在后。
根据程序先定义变量、后使用变量的规则（顺序执行），上述案例中轮播图片、Tab切换按钮中的jquery调用是调用不到jquery组件定义的相关功能的，因为jquery组件在代码最后面，这是轮播图片、Tab切换按钮失去交互效果的根本原因。
找到了原因，解决方案自然就出来了。把轮播图片、Tab切换按钮模块中的Javascript代码提取出来，放到外部的out.js文件中，然后把out.js文件放到jquery.js的后面即可。
另外，模板中的样式提取到外部文件中时，需要去掉<styletype="text/css"></style>；模板中的JS提取到外部文件中时，需要去掉<scripttype="text/javascript"></script>。当Head中布局CSS，body中布局JS时，要按照以下规范去操作，规避异常错误发生。
<head>
<!--组件css-->
<!--自定义css-->
</head>
<body>
<!--组件js-->
<!--自定义js-->
</body>