Allow components to be imported with or without dependencies

[36degrees]

What

Add a new file called _index.scss to each component, which contains the component’s styles but does not import the settings, helpers and tools layers.

Update the existing _[component].scss files to import the settings, helpers and tools layers and import _index.scss. This will preserve the existing behaviour, and continue to provide a single entry point for individual components that can be used in contexts such as React.

Update components/_all.scss to include every component’s _index.scss file, avoiding the unnecessary imports of the settings, helpers and tools layers within each component.

Why

As proposed in alphagov/govuk-design-system-architecture#22, we’re making changes to the way that the base layers (settings, tools and helpers) are imported within different parts of GOV.UK Frontend’s Sass, to reduce the time it takes to compile to CSS.