Github Actions - 如何在 CI 构建时将 SCSS 编译为 CSS？

Posted 2023-03-28

【中文标题】Github Actions - 如何在 CI 构建时将 SCSS 编译为 CSS？

【英文标题】：Github Actions - How to compile SCSS to CSS in CI build time?

【发布时间】：2021-12-30 12:33:12

【问题描述】：

我不确定人们如何在 Github Actions 的 CI build time 中将 scss 文件编译为 css 文件。这是我的做法。如果这是错误的处理方式，请告诉我。

这是我的 github 仓库： https://github.com/mattfrancis888/gh_actions_heroku

这是我的项目目录

.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

这是我的 main.yml，我正在关注 Sass Build Action 作为将 .scss 转换为的模板。在 CI 构建时使用 css。 （SASS Build Action 似乎很少有活动和支持）

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: "[e-mail]"

当我使用 SASS 尝试将 .scss 文件编译为 .csss 文件时，我在“从 SCSS 文件编译 CSS”的 github 操作步骤中收到此错误：

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

更新

@'Matthias' 的答案通过将 main.yml 更改为来解决此问题

          with:
          source: ./src/scss/main.scss
          destination:  ./src/scss/main.css 

但是，我现在遇到以下错误：

下面是一步一步的输出：将 SCSS 文件编译为 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

这是下一步尝试将其部署到 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'

看起来在 CI 构建时 main.csss 不是在 src/scss 中创建的。这是为什么呢？

【参考方案1】：

您是否尝试将 .之前 /？ 作为一个点意味着从这里到那里。 ;-)

原来是这样：

./src/scss/main.scss

【讨论】：

嘿@Matthias Kluth，你的回答奏效了！但是，更改后我遇到了另一个错误，我已经更新了帖子:)！