- Views: 18
- Report Article
- Articles
- Computers
- Programming
How to Add JS and CSS to Drupal 8?
Posted: Jul 30, 2015
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: VERSIONcss:
theme:
css/style.css: {}
Declare the file that you have just created to theme_name.info.yml file
name: Example
type: themecore: 8.x
libraries:
- theme_name/global-styling
global-scripts:
version: VERSIONjs:
js/script.js: {}
Now, add the following libraries
name: Example
type: themecore: 8.x
libraries:
- theme_name/global-styling
- theme_name/global-scripts
global-styles-and-scripts:
version: VERSIONcss:
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
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 assetsglobal-scripts:
version: VERSIONjs:
js/script.js: {}
dependencies:
- core/jquery
- core/jquery.once
- core/modernizr
js/
Specify Media Type
Specify a particular print stylesheet with a media parameter for the theme_name.libraries.ymlcss/
Conditional CSS or JS for Old IE Browsers
Specify the IE conditionals by specifying the parameters in theme_name.libraries.yml filehttp://yui.yahooapis.com/3.18.1/build/yui/ }
Deepa is a passionate blogger associated with Semaphore Software. She loves sharing information regarding drupal web development tips & tricks. If you are looking for hire drupal developers then just get in touch with her.
Deepa is a technical writer with Semaphore Software.