Running pancake is not applying custom colours

[badmotorfinger]

I have the following package.json

{
  "name": "design-system-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postinstall": "pancake"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "pancake": {
    "auto-save": true,
    "plugins": true,
    "ignore": [],
    "json": {
      "enable": false,
      "location": "pancake/",
      "name": "pancake",
      "content": {
        "name": true,
        "version": true,
        "dependencies": true,
        "path": true,
        "settings": true
      }
    },
    "css": {
      "minified": true,
      "modules": false,
      "browsers": [
        "last 2 versions",
        "ie 8",
        "ie 9",
        "ie 10"
      ],
      "location": "pancake/css/",
      "name": "pancake.min.css"
    },
    "sass": {
      "modules": false,
      "location": "pancake/sass/",
      "name": "pancake/pancake.scss"
    },
    "js": {
      "minified": true,
      "modules": false,
      "location": "pancake/js/",
      "name": "pancake.min.js"
    },
    "react": {
      "location": "pancake/react/"
    },
    "pancake-module": {
      "version": "1.0.0",
      "plugins": [
        "@gov.au/pancake-sass"
      ],
      "sass": {
        "path": "C:\\Users\\Vince\\source\\design-system-starter\\pancake\\lib\\sass\\_module.scss",
        "sass-versioning": true
      }
    }
  },
  "dependencies": {
    "@gov.au/accordion": "^6.0.1",
    "@gov.au/body": "^2.0.12",
    "@gov.au/breadcrumbs": "^3.0.2",
    "@gov.au/buttons": "^3.0.4",
    "@gov.au/core": "^3.1.1",
    "@gov.au/cta-link": "^2.1.4",
    "@gov.au/footer": "^3.0.1",
    "@gov.au/header": "^4.1.6"
  }
}

Here is my _module.scss

// Dark colour theme changes
$AU-colordark-foreground-text:   #4e7408 ;
$AU-colordark-foreground-action: #4e7408 ;
$AU-colordark-foreground-focus:  #4e7408 ;
$AU-colordark-background:        #4e7408;

// Grid breakpoint changes
$AU-media-sm: 750px;
$AU-media-md: 980px;

// Import the design system components
@import "C:\\Users\\Vince\\source\\design-system-starter\\pancake\\sass\\pancake\\pancake.scss";

// Additional customisation not related to components
body {
  margin: 0;
  padding: 0;
}

Running pancake does not pick up my color changes in the output css file.

And yes, I have tried using relative paths and fully qualified paths. Both fail to work.

Please help :)

[sukhrajghuman]

Hey @vincpa thanks for reaching out!

I think this is probably a gap with our documentation on customising colours. We have missed the part about compiling SASS code into CSS code. Pancake doesn't do this part unfortunately.

You will need to use a SASS compiler, such as node-sass to convert the _module.scss file into a css file.

We have a full working example with live reloading of SASS changes in our ui-kit starter repository, including a SASS file in which you can make changes to your colour themes.

We also have a step by step process on how we set up a development environment (including SASS to CSS compiling). You can visit the getting started docs on our site for this guide.

Let me know if this makes sense. I have also made a ticket to update our documentation 🙂

[sukhrajghuman]

Hey @vincpa we have updated our docs on customising colours as per govau/design-system-site#353. This includes a link to our guide on how to set up a development environment which covers how to convert SASS to CSS files for use on your project.

If you have any other questions/difficulties please feel free to reach out 😄