Merge pull request #490 from alphagov/use-index-instead-of-all-for-sa…

…ss-imports Tell users to use `index` instead of `all` when referring to sass imports
alphagov · Nov 29, 2024 · 95f9c82 · 95f9c82
2 parents c421fc4 + d99f44f
commit 95f9c82
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/source/import-css/index.html.md.erb b/source/import-css/index.html.md.erb
@@ -32,9 +32,11 @@ Then link the CSS file inside the `<head>` tag of your HTML page or page templat
 To import all the Sass rules from GOV.UK Frontend, add the following to your Sass file:
 
 ```scss
-@import "node_modules/govuk-frontend/dist/govuk/all";
+@import "node_modules/govuk-frontend/dist/govuk/index";
 ```
 
+You do not need `/index` at the end of your import if you’re using Dart Sass, LibSass 3.6.0 or higher, or Ruby Sass 3.6.0 or higher.
+
 ## 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.

diff --git a/source/installing-with-npm/index.html.md.erb b/source/installing-with-npm/index.html.md.erb
@@ -66,9 +66,11 @@ The accordion will use a generic font until you get the font and images working,
 There are also different ways you can [import GOV.UK Frontend's CSS](../import-css/), including into your project's main Sass file:
 
     ```scss
-    @import "node_modules/govuk-frontend/dist/govuk/all";
+    @import "node_modules/govuk-frontend/dist/govuk/index";
     ```
 
+You do not need `/index` at the end of your import if you’re using Dart Sass, LibSass 3.6.0 or higher, or Ruby Sass 3.6.0 or higher.
+
 ### Get the font and images working
 
 Your component will not use the right font or images until you've added GOV.UK Frontend's assets to your application.