Github 操作 - 如何在 CI 构建时将 SCSS 编译为 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
  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-utilities/sass-build/v0.4.7/node_modules/sass/sass.dart.js:2203:19)
    at StaticClosure._renderSync (/home/runner/work/_actions/gha-utilities/sass-build/v0.4.7/node_modules/sass/sass.dart.js:2004:18)
    at Object.Primitives_applyFunction (/home/runner/work/_actions/gha-utilities/sass-build/v0.4.7/node_modules/sass/sass.dart.js:6525:30)
    at Object.Function_apply (/home/runner/work/_actions/gha-utilities/sass-build/v0.4.7/node_modules/sass/sass.dart.js:13852:16)
    at _callDartFunctionFast (/home/runner/work/_actions/gha-utilities/sass-build/v0.4.7/node_modules/sass/sass.dart.js:15558:16)
    at Object.renderSync (/home/runner/work/_actions/gha-utilities/sass-build/v0.4.7/node_modules/sass/sass.dart.js:15536:18)
    at build_CSS (/home/runner/work/_actions/gha-utilities/sass-build/v0.4.7/index.js:122:28)
    at Object.<anonymous> (/home/runner/work/_actions/gha-utilities/sass-build/v0.4.7/index.js:167:5)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10) {
  formatted: 'Error: /src/scss/main.scss: no such file or directory',
  status: 3
}

From my understanding, main.yml starts with the directory level of package.json.

1. Why is it giving out the error?
2. Is there a better way to approach this issue other than relying on SASS Build Actions?

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