Merge pull request #48 from nhsuk/docs-assets

Compile docs-only CSS in eleventy build

.eleventy.js

@@ -1,4 +1,5 @@
 import nunjucks from 'nunjucks'
+import sass from 'sass'
 import { EleventyHtmlBasePlugin } from '@11ty/eleventy'
 
 const nunjucksEnv = nunjucks.configure([
@@ -16,16 +17,22 @@ export default function (eleventyConfig) {
   // Configure a custom nunjucks environment
   eleventyConfig.setLibrary('njk', nunjucksEnv)
 
-  // Copy static files
-  eleventyConfig.addPassthroughCopy({
-    'node_modules/nhsuk-frontend/dist/nhsuk.css': 'assets/nhsuk.css',
-    'dist/nhsapp.css': 'assets/nhsapp.css'
-  })
-
   // Watch for changes in these directories and files
-  eleventyConfig.addWatchTarget('./docs/')
   eleventyConfig.addWatchTarget('./src/')
-  eleventyConfig.addWatchTarget('./dist/nhsapp.css')
+
+  eleventyConfig.addTemplateFormats('scss')
+  eleventyConfig.addExtension('scss', {
+    outputFileExtension: 'css',
+    compile: async function (inputContent) {
+      let result = sass.compileString(inputContent, {
+        // Allow us to import scss files relative to the project root
+        loadPaths: ['.']
+      })
+      return async (data) => {
+        return result.css
+      }
+    }
+  })
 
   // We need this HtmlBase plugin for serving our docs on github pages at a subdirectory
   // https://www.11ty.dev/docs/plugins/html-base/

docs/_includes/layouts/base.njk

@@ -9,8 +9,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 
-    <link href="/assets/nhsuk.css" rel="stylesheet" />
-    <link href="/assets/nhsapp.css" rel="stylesheet" />
+    <link href="/assets/css/app.css" rel="stylesheet" />
 
     <title>{{ title }}</title>
   </head>

docs/assets/css/app.scss

@@ -0,0 +1,10 @@
+// Import all of the NHS.UK frontend core styles
+@import "node_modules/nhsuk-frontend/packages/core/all.scss";
+
+// Import specific components that we need from nhsuk-frontend
+@import "node_modules/nhsuk-frontend/packages/components/skip-link/skip-link.scss";
+@import "node_modules/nhsuk-frontend/packages/components/header/header.scss";
+@import "node_modules/nhsuk-frontend/packages/components/hero/hero.scss";
+
+// Import all styles from the NHS App frontend library
+@import "src/all.scss";