Sp-dev-docs: gulp serve infinite build loop when using *.sass files

[zerovectorspace]

Category

• [ ] Question
• [ x] Bug
• [ ] Enhancement

Expected or Desired Behavior

When developing an SPFx webpart, I converted the *.scss file to a *.sass file. gulp serve should work as expected.

Observed Behavior

gulp serve creates a *.sass.ts file in the same directory as the *.sass file. Since this hasn't been ignored by the gulp.watch command, it builds the solution infinitely without completing since the *.sass.ts has changed in the build process

Steps to Reproduce

convert *.scss files to *.sass files. Run gulp serve

Fix

In @microsoft/sp-build-web/lib/WebBuildRig.js, add the sass files and ignore the sass.ts files in the watch call on line 140 and 141.

Original code:

            executable: sp_build_common_1.serial(spBuildCoreTasks.serve, sp_build_common_1.watch(['src/**/*.{ts,tsx,scss,resx,js,json,html}',
                '!src/**/*.{scss.ts,resx.ts}'], sp_build_common_1.serial(result.get(WebBuildRigConstants_1.WebBuildRigConstants.tasks.bundle).executable, gulp_core_build_serve_1.reload))),

Working code:

            executable: sp_build_common_1.serial(spBuildCoreTasks.serve, sp_build_common_1.watch(['src/**/*.{ts,tsx,sass,scss,resx,js,json,html}',
                '!src/**/*.{sass.ts,scss.ts,resx.ts}'], sp_build_common_1.serial(result.get(WebBuildRigConstants_1.WebBuildRigConstants.tasks.bundle).executable, gulp_core_build_serve_1.reload))),

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[bcameron1231]

SPFx requires that Sass files must end with .module.scss extension. In that regard, this doesn't sound like a bug, but more of an enhancement. A similar discussion was brought up last fall https://github.com/SharePoint/sp-dev-docs/issues/2637

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues