Missing partial support for SASS

[StfBauer]

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Category

• Question
• Typo
• Bug
• Enhancement / Suggestion
• Additional article idea

Expected or Desired Behavior

The default behaviour of SASS handel filename that contains an underscore as partials. That means that no css will be compiled for those files instead the files can be used in SASS through an import statement.
The following code snippet is the content of a file named '_settings.scss'.

/*  _settings.scss   */
$red: red;
$blue: navy;

The following contains the import in a 'mywebpart.module.scss'.

/* mywebpart.module.scss' */
@import 'settings'

It breaks somehow the default behaviour of SASS. Normally ever file with the extensions '.scss' should trigger a recompilation of all the style definitons.

Observed Behavior

The problem here is that file changes will be detected when the _settings.scss will be saved. The build pipeline will be triggered except the SASS compilation. Even the browser refreshes but the style sheet definitions won't be updated.

Steps to Reproduce

Create the two files mentioned before and import the partial SASS file in the main sass file of the web part. Save now the partial SASS file and wait until the compilation of SPFx has finished.
After that still the sold style definiton is embedded in the browser.
Go back to the main sass file and save that file. This will cause the trigger to recompile the style sheets and the new style definitons will be embedded on the page.

PS or Sidenote: In additon, not sure if this will work in future. Other tools like spfx directly inject the changed style sheet and reapply them to the design without forcing a reload of the browser.

[nickpape]

This is definitely a bug, thanks for reporting it Stefan. We went ahead and mitigated the issue by removing incremental SASS builds, although our eventual approach would be to track the imports and rebuild any downstream SASS files. You should see this in the next drop.

To ensure that the SASS files are rebuilt correctly before doing any deployment, make sure to run gulp clean before the build.

[StfBauer]

@nickpape-msft I recently tested this partial SASS support and it seems to be fine now. Haven't found any issue yet. May I close it?

[StfBauer]

Meanwhile fixed.

[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