Github Actions CI构建时如何编译SCSS为CSS？Heroku部署报错如何解决？

你在SASS编译完成后，又执行了一次actions/checkout@v2操作，这个步骤会重置当前工作区的所有文件，恢复到刚拉取远程仓库的初始状态，你之前编译生成的main.css属于未被Git追踪的文件，会直接被这次checkout操作清除，所以后续部署到Heroku的时候自然找不到该文件。

直接删掉部署步骤前重复的checkout代码即可，修改后的完整build配置如下：

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
              destination:  ./src/scss/main.css 

        # 部署到heroku，无需再次执行checkout
        - uses: akhileshns/heroku-deploy@v3.12.12
          with:
              heroku_api_key: ${{secrets.HEROKU_API_KEY}}
              heroku_app_name: "ga"
              heroku_email: "a88@gmail.com"

如果你担心第三方SASS Action的维护性问题，也可以不用第三方Action，直接基于项目本身的依赖完成编译：

• 在package.json的scripts中添加编译脚本："build:scss": "sass src/scss/main.scss src/scss/main.css"
• 把sass提前加入项目的开发依赖
• 把SASS编译步骤替换为执行npm run build:scss即可，兼容性更强

内容的提问来源于stack exchange，提问作者Matthew Francis