Unable to start playground, scss loading error

[YazeedFares]

Versions

<!--
angular-playground version 8.2.0
-->

<!--
Output from: `ng --version`.
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 12.2.3
Node: 14.15.4
Package Manager: npm 7.21.1
OS: darwin x64

Angular: 12.2.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.3
@angular-devkit/build-angular   12.2.3
@angular-devkit/core            12.2.3
@angular-devkit/schematics      12.2.3
@angular/cdk                    11.2.12
@schematics/angular             12.2.3
rxjs                            6.6.7
typescript                      4.2.3

-->

Repro steps

• Install angular-playground using ng add angular-playground --project=sample-project command:
• Run angular playground using npm run playground command

Observed Behavior

<!-- [ng serve]: 
./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
2 │ @import '~sass/zindex';
  │         ^^^^^^^^^^^^^^
  ╵
  src/sass/shared.scss 2:9  @import
  src/styles.scss 6:9       root stylesheet
    at processResult (/Users/user/git/sample-project/node_modules/webpack/lib/NormalModule.js:713:19)
    at /Users/user/git/sample-project/node_modules/webpack/lib/NormalModule.js:819:5
    at /Users/user/git/sample-project/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/user/git/sample-project/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/user/git/sample-project/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.callback (/Users/user/git/sample-project/node_modules/sass-loader/dist/index.js:54:7)
    at Worker.<anonymous> (/Users/user/git/sample-project/node_modules/@angular-devkit/build-angular/src/sass/sass-service.js:134:25)
    at Worker.emit (events.js:315:20)
    at MessagePort.<anonymous> (internal/worker.js:207:53)
    at MessagePort.[nodejs.internal.kHybridDispatch] (internal/event_target.js:354:41)

[ng serve]: 
** Angular Live Development Server is listening on 127.0.0.1:4201, open your browser on http://127.0.0.1:4201/ **

 -->

Desired Behavior

<!-- 
The app compiles without errors and loads the sass files properly 
-->

[pascallalonde]

I've fixed my import issues by adding my configuration to 'playground' to angular.json. "stylePreprocessorOptions": { "includePaths": ["[your_project_path]/src/styles"] },