How to resolve this plugin sass error in my SharePointFramework?

Question

I am new to SharePointFramework. I started my second webpart project and downloaded the framework follow come packages with ** yo @microsoft/sharepoint ** Anytime I run ** gulp serve** this sass error keeps popping out. Note I am using NVM and it is currently running on version 10.19.0 ** package.json file **

{
  "name": "react-list-info",
  "version": "0.0.1",
  "private": true,
  "main": "lib/index.js",
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "~1.1.0",
    "@microsoft/sp-webpart-base": "~1.1.0",
    "@microsoft/sp-lodash-subset": "~1.1.0",
    "@microsoft/sp-office-ui-fabric-core": "~1.4.0-0"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.1.0",
    "@microsoft/sp-module-interfaces": "~1.1.0",
    "@microsoft/sp-webpart-workbench": "~1.1.0",
    "gulp": "~3.9.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
    "@types/webpack-env": "1.13.1",
    "@types/es6-promise": "0.0.33"
  }
}

**WebPart.module.scss file **

@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";

. {
  .container {
    max-width: 700px;
    margin: 0px auto;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  }

  .row {
    @include ms-Grid-row;
    @include ms-fontColor-white;
    background-color: $ms-color-themeDark;
    padding: 20px;
  }

  .column {
    @include ms-Grid-col;
    @include ms-lg10;
    @include ms-xl8;
    @include ms-xlPush2;
    @include ms-lgPush1;
  }

  .title {
    @include ms-font-xl;
    @include ms-fontColor-white;
  }

  .subTitle {
    @include ms-font-l;
    @include ms-fontColor-white;
  }

  .description {
    @include ms-font-l;
    @include ms-fontColor-white;
  }

  .button {
    // Our button
    text-decoration: none;
    height: 32px;

    // Primary Button
    min-width: 80px;
    background-color: $ms-color-themePrimary;
    border-color: $ms-color-themePrimary;
    color: $ms-color-white;

    // Basic Button
    outline: transparent;
    position: relative;
    font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system,
      BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: $ms-font-size-m;
    font-weight: $ms-font-weight-regular;
    border-width: 0;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    padding: 0 16px;

    .label {
      font-weight: $ms-font-weight-semibold;
      font-size: $ms-font-size-m;
      height: 32px;
      line-height: 32px;
      margin: 0 4px;
      vertical-align: top;
      display: inline-block;
    }
  }
}

** Full error console display **

Error in plugin 'sass'
Message:
    src\webparts\WebPart.module.scss
Error: Invalid CSS after "...bricCore.scss';": expected 1 selector or at-rule, was ". {"     
        on line 1 of src/webparts/WebPart.module.scss
>> -fabric-core/dist/sass/SPFabricCore.scss';
   ------------------------------------------^

[18:44:29] Error - 'sass' sub task errored after 26 s
 "Errors found in sass file(s)."
[18:44:29] 'serve' errored after 26 s
[18:44:29]
[18:44:29] Finished subtask 'copy-static-assets' after 26 s
[18:44:29] ==================[ Finished ]==================
Error - 'sass' sub task errored after 26 s
 "Errors found in sass file(s)."
[18:44:30] Project react-list-info version: 0.0.1
[18:44:30] Build tools version: 2.5.3
[18:44:30] Node version: v10.19.0
[18:44:30] Total duration: 1.55 min
[18:44:30] Task errors: 1

Answer 1

Try to run:

npm shrinkwrap
npm install

Similar issue in Github:https://github.com/pnp/sp-dev-fx-webparts/issues/497