Skip to main content

Import CSS

To import the CSS from GOV.UK Frontend, you can either:

  • add GOV.UK Frontend’s CSS file to your HTML
  • import the CSS into your own Sass file

Add the CSS file to your HTML

If you decide to add the CSS to your HTML, you can do one of the following:

  • set up your routing so requests for the CSS file are served from node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.css
  • copy the node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.css file into your application

Then link the CSS file inside the <head> tag of your HTML page or page template.

<head>
  <!-- // ... -->
  <link rel="stylesheet" href="<YOUR-STYLESHEETS-FOLDER>/govuk-frontend.min.css">
  <!-- // ... -->
</head>

Import using Sass

To import all the Sass rules from GOV.UK Frontend, add the following to your Sass file:

@import "node_modules/govuk-frontend/dist/govuk/all";

Import specific parts using Sass

If you want to improve how quickly your service’s pages load in browsers, you can import only the Sass rules you need.

  1. Import node_modules/govuk-frontend/dist/govuk/base in your Sass file.
  2. Import the parts of the CSS you need.

For example, add the following to your Sass file to import the CSS you need for a basic GOV.UK page.

@import "node_modules/govuk-frontend/dist/govuk/base";

@import "node_modules/govuk-frontend/dist/govuk/core/all";
@import "node_modules/govuk-frontend/dist/govuk/objects/all";
@import "node_modules/govuk-frontend/dist/govuk/components/footer/index";
@import "node_modules/govuk-frontend/dist/govuk/components/header/index";
@import "node_modules/govuk-frontend/dist/govuk/components/skip-link/index";
@import "node_modules/govuk-frontend/dist/govuk/utilities/all";
@import "node_modules/govuk-frontend/dist/govuk/overrides/all";

You can remove lines that import parts of the CSS you do not need.

Read more about the different parts of GOV.UK Frontend’s CSS.

You do not need /index at the end of your component imports if you’re using Dart Sass, LibSass 3.6.0 or higher, or Ruby Sass 3.6.0 or higher.

Import an individual component’s CSS using a single Sass import

You can also import a component and all its dependencies without importing node_modules/govuk-frontend/dist/govuk/base first.

To import the button component for example, add the following to your Sass file:

@import "node_modules/govuk-frontend/dist/govuk/components/button/button";

Simplify Sass import paths

If you want to make Sass import paths shorter, add node_modules/govuk-frontend/dist to either your:

You can then import without using node_modules/govuk-frontend/dist/ in your import path. For example:

@import "govuk/components/button/button";

Override with your own CSS

If you want to override GOV.UK Frontend’s styles with your own styles, @import GOV.UK Frontend’s styles before your own Sass rules.

Silence deprecation warnings from dependencies in Dart Sass

If you’re using Dart Sass 1.33.0 or greater, you may see deprecation warnings when compiling your Sass. For example:

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

We’re currently unable to fix these deprecation warnings without breaking support for LibSass. However, you can silence the warnings caused by GOV.UK Frontend and other dependencies. Make sure you’re using Dart Sass 1.49.10 or greater, and then if you’re:

You’ll still see deprecation warnings if you’re using / for division in your own Sass code.