Remove default CSS imports and JS files in Drupal

Question

I'm building my first Drupal theme and found out something rather shocking. Drupal 7 imports 10 CSS files by default.

<style type="text/css" media="all">
@import url("http://localhost/drupal/modules/system/system.base.css?oq6xx1");
@import url("http://localhost/drupal/modules/system/system.menus.css?oq6xx1");
@import url("http://localhost/drupal/modules/system/system.messages.css?oq6xx1");
@import url("http://localhost/drupal/modules/system/system.theme.css?oq6xx1");
</style>
<style type="text/css" media="all">
@import url("http://localhost/drupal/modules/comment/comment.css?oq6xx1");
@import url("http://localhost/drupal/modules/field/theme/field.css?oq6xx1");
@import url("http://localhost/drupal/modules/node/node.css?oq6xx1");
@import url("http://localhost/drupal/modules/search/search.css?oq6xx1");
@import url("http://localhost/drupal/modules/user/user.css?oq6xx1");
</style>
<style type="text/css" media="all">
@import url("http://localhost/drupal/themes/stark/layout.css?oq6xx1");
</style>

And then this included too (not sure why or what it does)

<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/drupal\/","pathPrefix":"","ajaxPageState":{"theme":"stark","theme_token":"3s2kHk4YAL5BDTRW1hanuB6zKdWug7cniWp_uAyRBKk","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"themes\/stark\/layout.css":1}},"urlIsAjaxTrusted":{"\/drupal\/node?destination=node":true}});
//--><!]]>
</script>

I'm building a simple Drupal website from scratch and don't need those 2000 lines of css codes in the frontend. How do I proceed and remove it all? I just need my custom-style.css file and that's it.

There are multiple answers to your questions but scenario isn't complete here. Are you creating a custom theme? Or using the default Drupal theme? all sort of things are not specified here. Thus i would suggest you to read this post and proceed drupal.org/docs/7/theming/howto/…. This will help you to understand the Drupal custom theme. — Anurag
– Anurag, Commented May 19, 2017 at 8:50
I thought I did specify clearly that I'm building "from scratch"! and I have already gone through that documentation and many more. — Elaine Byene
– Elaine Byene, Commented May 19, 2017 at 13:42

Kruti Patel · Accepted Answer · 2017-05-19 20:02:37Z

You can use hook_css_alter api to remove core and crontributed module default css files. https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_css_alter/7.x

For Javascript check this hook_js_alter: https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_js_alter/7.x

for example:

<?php
            function YOUR_THEME_css_alter(&$css) {

            // Remove Drupal core css

            $exclude = array(
            'modules/aggregator/aggregator.css' => FALSE,
            'modules/block/block.css' => FALSE,
            'modules/book/book.css' => FALSE,
            'modules/comment/comment.css' => FALSE,
            'modules/dblog/dblog.css' => FALSE,
            'modules/field/theme/field.css' => FALSE,
            'modules/file/file.css' => FALSE,
            'modules/filter/filter.css' => FALSE,
            'modules/forum/forum.css' => FALSE,
            'modules/help/help.css' => FALSE,
            'modules/menu/menu.css' => FALSE,
            'modules/node/node.css' => FALSE,
            'modules/openid/openid.css' => FALSE,
            'modules/poll/poll.css' => FALSE,
            'modules/profile/profile.css' => FALSE,
            'modules/search/search.css' => FALSE,
            'modules/statistics/statistics.css' => FALSE,
            'modules/syslog/syslog.css' => FALSE,
            'modules/system/admin.css' => FALSE,
            'modules/system/maintenance.css' => FALSE,
            'modules/system/system.css' => FALSE,
            'modules/system/system.admin.css' => FALSE,
            'modules/system/system.base.css' => FALSE,
            'modules/system/system.maintenance.css' => FALSE,
            'modules/system/system.messages.css' => FALSE,
            'modules/system/system.menus.css' => FALSE,
            'modules/system/system.theme.css' => FALSE,
            'modules/taxonomy/taxonomy.css' => FALSE,
            'modules/tracker/tracker.css' => FALSE,
            'modules/update/update.css' => FALSE,
            'modules/user/user.css' => FALSE,
            'misc/vertical-tabs.css' => FALSE,

            // Remove contrib module CSS
            drupal_get_path('module', 'views') . '/css/views.css' => FALSE, );
            $css = array_diff_key($css, $exclude);

            }
            ?>

Collectives™ on Stack Overflow

Remove default CSS imports and JS files in Drupal

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related