Partials SASS file cause warning that is not appropriate and broken SASS/CSS/CSS Modules compilation

[StfBauer]

Category

• Question
• Typo
• Bug
• Additional article idea

Expected or Desired Behavior

When SASS partial files in SPFx will be used there should not get a warning issued that the filename should end with module.scss.
The message and warning are not appropriate.

Observed Behavior

When a partial SASS file in SPFx gets used and saved the following message on the console gets issued.

This is caused because one of the SASS files in the project uses an underscore as the first character in the file name a clear indication that this is a partial file that shouldn't get compiled by SASS.

On the other hand when the file is named _quicklink.module.scss this breaks the default SASS rules that files with an under should not get compiled. In addition, the file needs to be imported like this @import 'quicklinks.module' to have a single style object for the web part. White the compiled CSS file, Type Definitons and map file will never get used at all but will be packaged.

In general, the rule that causes this issue should be modified to get raised only on files that are named like quicklinks.scss but shouldn't get raised for files that start with _quicklinks.scss.

Steps to reproduce

Test 1

• Create new web part project
• add a file named _testfile.scss
• add ```import 'testfile'````to the main web part CSS.
• Check web part folder in lib directory
• Styles should be included in the main web part CSS file
  Checks
• Style Type definitions should include the imported CSS
• Style Object should include the imported classes defined in partial
• During compilation issue get raised all the time

Test 2

• Create new web part project
• add a file named _testfile.module.scss
• add ```import 'testfile.module'````to the main web part CSS.
• Check web part folder in lib directory
• Styles should be included in the main web part CSS file + additional files
  ** testfile.modules.scss.d.ts
  ** testfile.modules.scss.js
  ** testfile.modules.scss.d.map
  will be generated in the lib folder
• Style Type definitions should include the imported CSS
• Style Object should include the imported classes defined in partial
• No issues gets raise but the mentioned files above never need to be used because everything is already included

This issue is being closed as part of an issue list cleanup project. Issues with no activity in the past 6 months that aren't tracked by engineering as bugs were closed as part of this inititive. If this is still an issue, please follow the steps outlined to re-open or submit a new issue.

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