In Drupal 8, if we are required to add some Stylesheets or JavaScripts in a particular page then to achieve the goal we need THEME.info.yml and THEME.libraries.yml file of our theme.
Lets see how can we achieve it.
In the .info.yml file we defined the global library that contains global styles.
Now in the .libraries.yml file we initialize our specific library.
Let's define them in the following code :
THEME.info.yml
name: Basic
description: My theme.
type: theme
core: 8.x
# Regions
regions:
header: Header
content: Content
footer: Footer
# Scripts & Styles
libraries:
- basic/global
THEME.libraries.yml
global:
css:
theme:
css/style.css: {}
css/print.css: { media: print }
js:
js/scripts.js: {}
myslider:
css:
theme:
css/myslider.css: {}
js:
js/myslider.js: {}
dependencies:
- core/jquery
In the above codes we have defined two files .info.yml and .libraries.yml files.
Lest, if we need to apply custom css myslider.css and script myscript.js in myslider page only.
For that we have to defined the css and js in .libraries,yml under the name mysider.
Now, the thing is we have to call the library myslider at our myslider page for that we will use our twig tag to attach this library.
in your myslider.html.twig page add the below line.
{{ attach_library('MYTHEME/myslider') }}
Now our library will get added to the only template page in which we need to call.
In this way we apply our styling to only those template file where they are required. It does helps in fast rendering of page as browser doesn't need to load unnecessary file.
0 Comment(s)