Update guidance on importing parts of Frontend #56
Conversation
With the changes in GOV.UK Frontend v3.7.0, the preferred way to import a subset of the components has changed, with the introduction of a new index file for each component. Importing the components using the index file avoids re-importing the 'base' (settings, tools and helpers layers) multiple times, improving compilation times. Differentiate between importing _select bits_ of GOV.UK Frontend vs importing a single specific component. Include `/index` by default when importing, as older Sass compilers don't support importing index files, but add a note that explains that you can remove it if you are using a newer version.
|
Deploy preview for govuk-frontend-docs-preview ready! Built with commit 945fe2b https://deploy-preview-56--govuk-frontend-docs-preview.netlify.app |
m-green
force-pushed
the
import-component-index-files
branch
from
acabcc9 to
eb9cac4
Compare
|
@36degrees Updated following our discussion! Let me know if it looks ok to go to 2i. |
|
|
||
| To import the [button](https://design-system.service.gov.uk/components/button/) component for example, add the following to your Sass file: | ||
| If you want to improve how quickly Sass compiles to CSS, you can import only the Sass rules you need. |
There was a problem hiding this comment.
This will also (and arguably a lot more importantly) improve performance for end users, as the compiled CSS will only include the bits required for the service, so it'll be smaller, and thus the page will load quicker.
There was a problem hiding this comment.
Ah thanks - updated in 148d922.
| @import | ||
| "node_modules/govuk-frontend/govuk/overrides/all"; |
There was a problem hiding this comment.
| @import | |
| "node_modules/govuk-frontend/govuk/overrides/all"; | |
| @import "node_modules/govuk-frontend/govuk/overrides/all"; |
|
LGTM – needs 2i and v3.7.0 to be released? |
|
This has been 2i'd - now waiting for v3.7.0 release. |
| ``` | ||
| 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](https://github.com/alphagov/govuk-frontend/tree/master/src/govuk). |
There was a problem hiding this comment.
Non-blocking but this should really link to https://github.com/alphagov/govuk-frontend/tree/master/src/govuk#the-src-directory
With the changes in GOV.UK Frontend v3.7.0, the preferred way to import a subset of the components has changed, with the introduction of a new index file for each component.
Importing the components using the index file avoids re-importing the 'base' (settings, tools and helpers layers) multiple times, improving compilation times.
Differentiate between importing select bits of GOV.UK Frontend vs importing a single specific component.
Include
/indexby default when importing, as older Sass compilers don't support importing index files, but add a note that explains that you can remove it if you are using a newer version.Closes #47