Goal
Have your SCSS Code compiled to CSS during deployment on Platform.sh
Assumptions
- An empty Platform.sh project
- A local git repository, with Platform.as as a remote
- Knowledge of how to serve a static HTML page on Platform.sh
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.