Gulp build task fails with: "Error: It's not clear which file to import for '@import ..."

Issue

• After launching a gulp build task, the tool will encounter an error similar to the below:

  [15:14:33] 'build:compile-lib-sass' errored after 811 ms
  [15:14:33] Error in plugin 'gulp-sass'
  Message:
      build/_css/mystyle.scss
  Error: It's not clear which file to import for '@import "my-variables"'.
         Candidates:
           my-variables.scss
           my-variables.css
         Please delete or rename all but one of these files.
          on line 1 of build/_css/mystyle.scss
  >> @import 'my-variables';
     ^
  
      domainEmitter: [object Object]
      domainThrown: false
  [15:14:33] 'build:compile-css' errored after 812 ms
  [15:14:33] 'build' errored after 1.57 s

Environment

• Liferay DXP 7.0+
• Liferay Theme Generator

Resolution

• Most common case-scenario can be solved in this way: navigate to my-theme/src/css/ and rename my-variables.scss to _my-variables.scss
  
  
• Other use-cases and solutions may include the below:
  
  - 7.1 Theme building with maven and sass errors
  - How to fix build error which file to import _custom.scss or custom.css?

Additional Information

• SCSS file names starting without underscore _ are going to be compiled on their own and will be converted to CSS. If we want to let SASS know that there is a file to be imported  with "@import",  the imported file name should start with underscore _ in order to be recognized. This is in line with the way of managing the partials file with SASS: https://sass-lang.com/guide#topic-4