MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

How to Add JS and CSS to Drupal 8?

Published on 30 July 15
920
0
2
How to Add JS and CSS to Drupal 8? - Image 1

In a recent update made by Drupal 8, they have changed the way the asset libraries for both JS and CSS are attached to the theme. You will need to think of adopting these strategies for a variety of scenarios. Here are some of the widely thought of strategies that you can use to add JS and CSS libraries to your Drupal 8 application or website.

Global Styles and Scripts
If you want to add the CSS or JS assets through global libraries then here's how you can possibly achieve that.

The name of the global library is global-styling which will help in creating global styles, and it has been declared within the theme_name.libraries.yml. It is also added within the theme_name.info.yml. You can avail this library through the website, as it has been declared as the global library. The theme_name.libraries.yml file will appear as follows
global-styling:
version: VERSION
css:
theme:
css/style.css: {}

Declare the file that you have just created to theme_name.info.yml file

name: Example
type: theme
core: 8.x
libraries:
- theme_name/global-styling

Next, you need to declare the scripts to the same path
global-scripts:
version: VERSION
js:
js/script.js: {}

Now, add the following libraries
name: Example
type: theme
core: 8.x
libraries:
- theme_name/global-styling
- theme_name/global-scripts

Combine both CSS and JS assets into one
global-styles-and-scripts:
version: VERSION
css:
theme:
css/style.css: {}
js:
js/script.js: {}

Deleting or Overriding the Styles in Core
Go to theme_name.info.yml and

stylesheets-remove:
- normalize.css

You can even override the core's stylesheets

Declaring Dependencies
Generally, you won't find any default additional scripts. You can look in the following path to get an idea of the core assets: /core/assets/vendor. Here's how you can declare a dependency in Drupal 8 for your CSS or JS assets

global-scripts:
version: VERSION
js:
js/script.js: {}
dependencies:
- core/jquery
- core/jquery.once
- core/modernizr

Scope of JS File
If you want to change the position of an asset from the header to the footer, you can easily specify the scope and venture to do so. You can specify the scope in theme_name.libraries.yml

js/script.js: { scope: footer }

Specify Media Type
Specify a particular print stylesheet with a media parameter for the theme_name.libraries.yml

css/print.css: { media: print }

Conditional CSS or JS for Old IE Browsers
Specify the IE conditionals by specifying the parameters in theme_name.libraries.yml file

http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js: { type: external, browsers: { IE: 'lte IE 8', '!IE': false } }



















How to Add JS and CSS to Drupal 8? - Image 1

In a recent update made by Drupal 8, they have changed the way the asset libraries for both JS and CSS are attached to the theme. You will need to think of adopting these strategies for a variety of scenarios. Here are some of the widely thought of strategies that you can use to add JS and CSS libraries to your Drupal 8 application or website.

Global Styles and Scripts

If you want to add the CSS or JS assets through global libraries then here's how you can possibly achieve that.

The name of the global library is global-styling which will help in creating global styles, and it has been declared within the theme_name.libraries.yml. It is also added within the theme_name.info.yml. You can avail this library through the website, as it has been declared as the global library. The theme_name.libraries.yml file will appear as follows

global-styling:

version: VERSION

css:

theme:

css/style.css: {}

Declare the file that you have just created to theme_name.info.yml file

name: Example

type: theme

core: 8.x

libraries:

- theme_name/global-styling

Next, you need to declare the scripts to the same path

global-scripts:

version: VERSION

js:

js/script.js: {}

Now, add the following libraries

name: Example

type: theme

core: 8.x

libraries:

- theme_name/global-styling

- theme_name/global-scripts

Combine both CSS and JS assets into one

global-styles-and-scripts:

version: VERSION

css:

theme:

css/style.css: {}

js:

js/script.js: {}

Deleting or Overriding the Styles in Core

Go to theme_name.info.yml and

stylesheets-remove:

- normalize.css

You can even override the core's stylesheets

Declaring Dependencies

Generally, you won't find any default additional scripts. You can look in the following path to get an idea of the core assets: /core/assets/vendor. Here's how you can declare a dependency in Drupal 8 for your CSS or JS assets

global-scripts:

version: VERSION

js:

js/script.js: {}

dependencies:

- core/jquery

- core/jquery.once

- core/modernizr

Scope of JS File

If you want to change the position of an asset from the header to the footer, you can easily specify the scope and venture to do so. You can specify the scope in theme_name.libraries.yml

js/script.js: { scope: footer }

Specify Media Type

Specify a particular print stylesheet with a media parameter for the theme_name.libraries.yml

css/print.css: { media: print }

Conditional CSS or JS for Old IE Browsers

Specify the IE conditionals by specifying the parameters in theme_name.libraries.yml file

http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js: { type: external, browsers: { IE: 'lte IE 8', '!IE': false } }

This blog is listed under Open Source and Development & Implementations Community

Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top