How to compile CSS using SASS on Platform.sh

#1

Goal

Have your SCSS Code compiled to CSS during deployment on Platform.sh

Assumptions

Steps

1. Create a HTML file and link style.css.

./web/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>Foobar</h1>
  <p>lorem ipsum</p>
</body>
</html>

2. Create a SCSS file .

./scss/style.scss

$colors: (
  background: rgb(26, 25, 43),
  text: rgb(255, 255, 255),
);

body {
  background-color: map-get($colors, 'background');
  color: map-get($colors, 'text');
}

3. Define default routes.

./.platform/routes.yaml

https://{default}/:
    type: upstream
    upstream: sasshowto:http

4. Add empty services (we don’t need any in this example).

./.platform/services.yaml

# empty

5. Add .platform.app.yaml configuration.

./.platform.app.yaml

name: sasshowto

# Any type will work as we just serve static HTML
type: "php:7.3"

# Install sass from npm
dependencies:
  nodejs:
    sass: '~1.17.2'

# Compile sass to css during the build hook and save output to web/style.css with compressed css for production
hooks:
    build: |
        sass --style compressed scss/style.scss web/style.css

disk: 256
web:
    locations:
        "/":
            # This tells Nginx to serve from the base directory
            root: "web"
            index:
                - "index.html"

6. Add, commit, and push these files to your empty Platform.sh project.

git add .
git commit -m "Compile SASS to CSS"
git push -u platform master

7. Test by visiting the URL of your environment.

Check that white text on a dark blue background is visible on the site.

platform url

Conclusion

Every time the project is pushed to Platform.sh, compressed CSS will be generated from your SCSS-File and put into web/style.css.