Github Actions - How to compile SCSS to CSS in CI build time? - css

Question

I am unsure how people are compiling scss files to css files in Github Actions' CI build time . Here is my way of doing it. Please let me know if it's the wrong way to approach it.
Here is my github repo:
https://github.com/mattfrancis888/gh_actions_heroku
Here is my project directory
.github
-> workflows
-> main.yml
src
pages
->app.ts
scss
-> main.scss
-> main.css (untracked in git & not pushed to remote repoistory, it is used locally
; github actions should compile the main.scss file and create a main.css file at CI build time)
package.json
Here is my main.yml, I am following Sass Build Action as the template to convert .scss to. css at CI build time. (SASS Build Action seems to have very little activity & support on it)
build:
runs-on: ubuntu-latest
steps:
- name: Checkout source Git branch
uses: actions/checkout#v2
with:
ref: main
fetch-depth: 10
submodules: true
- name: Compile CSS from SCSS files
uses: gha-utilities/sass-build#v0.4.7
with:
source: /src/scss/main.scss #I have removed the / in /src and it is still failing
destination: /src/scss/main.css
#deploys to heroku (unrelated to SASS Build Action)
- uses: actions/checkout#v2
- uses: akhileshns/heroku-deploy#v3.12.12 # This is the action
with:
heroku_api_key: ${{secrets.HEROKU_API_KEY}}
heroku_app_name: "ga" #Must be unique in Heroku
heroku_email: "a88#gmail.com"
When I use SASS to try to compile .scss files to .csss files, I am receiving this error in github action's step at "Compile CSS from SCSS files" :
Error: /src/scss/main.scss: no such file or directory
at Object._newRenderError (/home/runner/work/_actions/gha(internal/modules/cjs/loader.js:995:10) {
formatted: 'Error: /src/scss/main.scss: no such file or directory',
status: 3
}
Update
This is fixed by #'Matthias' answer by changing the main.yml to
with:
source: ./src/scss/main.scss
destination: ./src/scss/main.css
However, I am met with the following error now:
Here is the output that is working in step: Compile SCSS files to CSS:
Run gha-utilities/sass-build#v0.4.7
Warning: ENOENT: no such file or directory, stat './src/scss/main.css'
Attempting to write to file path -> ./src/scss/main.css
Wrote file -> ./src/scss/main.css
This is the error in the next step when trying to deploy it to heroku.
remote: Failed to compile.
remote: remote: ./pages/_app.tsxremote:
Module not found: Can't resolve '../src/scss/main.css' in '/tmp/build_9673181c/pages'
It looks like main.csss is not created in src/scss at the CI build time. Why is that?

Answer 1

Did you try to put an . before the /?
As a dot means from right here go there. ;-)
So it would be:
./src/scss/main.scss