SharePoint SpFx project SCSS compliation error

{
  "name": "project-name",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=16.13.0 <17.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@fluentui/react": "^7.199.1",
    "@microsoft/sp-component-base": "1.17.3",
    "@microsoft/sp-core-library": "1.17.3",
    "@microsoft/sp-lodash-subset": "1.17.3",
    "@microsoft/sp-office-ui-fabric-core": "1.17.3",
    "@microsoft/sp-property-pane": "1.17.3",
    "@microsoft/sp-webpart-base": "1.17.3",
    "@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.5",
    "@progress/kendo-licensing": "^1.3.0",
    "@progress/kendo-react-animation": "^5.14.1",
    "@progress/kendo-react-buttons": "^5.14.1",
    "@progress/kendo-react-data-tools": "^5.14.1",
    "@progress/kendo-react-dateinputs": "^5.14.1",
    "@progress/kendo-react-dialogs": "^5.14.1",
    "@progress/kendo-react-dropdowns": "^5.14.1",
    "@progress/kendo-react-excel-export": "^5.14.1",
    "@progress/kendo-react-grid": "^5.14.1",
    "@progress/kendo-react-inputs": "^5.14.1",
    "@progress/kendo-react-intl": "^5.14.1",
    "@progress/kendo-react-layout": "^5.14.1",
    "@progress/kendo-react-popup": "^5.14.1",
    "@progress/kendo-react-progressbars": "^5.14.1",
    "@progress/kendo-react-treeview": "^5.14.1",
    "@progress/kendo-svg-icons": "^1.5.0",
    "@progress/kendo-theme-default": "^6.6.0",
    "moment": "^2.29.4",
    "office-ui-fabric-react": "^7.199.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.17.3",
    "@microsoft/eslint-plugin-spfx": "1.17.3",
    "@microsoft/rush-stack-compiler-4.5": "0.5.0",
    "@microsoft/sp-build-web": "1.17.3",
    "@microsoft/sp-module-interfaces": "1.17.3",
    "@rushstack/eslint-config": "2.5.1",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "eslint": "8.7.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "gulp": "4.0.2",
    "typescript": "4.5.5"
  }
}

@import '~@fluentui/react/dist/sass/References.scss';
@import "~@progress/kendo-theme-default/dist/all.scss";

.projectName {
  
  .container {
    max-width: 900px;
    margin: 0px auto;
  }

  .header {
    border-bottom: 1px dotted;
    font-size: 24px;
    font-weight: bold;
    width: 100%;
  }

  .rowLight {
    @include ms-Grid-row;
    padding: 10px;
    border-radius: 10px;
  }

  .row {
    @include ms-Grid-row;
    background-color: $ms-color-neutralLight;
    padding: 10px;
    border-radius: 10px;
  }

  .column1 {
    @include ms-Grid-col;
    @include ms-sm1;
    @include ms-md1;
    @include ms-lg1;
  }

  .column2 {
    @include ms-Grid-col;
    @include ms-sm2;
    @include ms-md2;
    @include ms-lg2;
  }

  .column3 {
    @include ms-Grid-col;
    @include ms-sm3;
    @include ms-md3;
    @include ms-lg3;
  }

  .column4 {
    @include ms-Grid-col;
    @include ms-sm4;
    @include ms-md4;
    @include ms-lg4;
  }

  .column5 {
    @include ms-Grid-col;
    @include ms-sm5;
    @include ms-md5;
    @include ms-lg5;
  }

  .column6 {
    @include ms-Grid-col;
    @include ms-sm6;
    @include ms-md6;
    @include ms-lg6;
  }

  .column7 {
    @include ms-Grid-col;
    @include ms-sm7;
    @include ms-md7;
    @include ms-lg7;
  }

  .column8 {
    @include ms-Grid-col;
    @include ms-sm8;
    @include ms-md8;
    @include ms-lg8;
  }

  .column9 {
    @include ms-Grid-col;
    @include ms-sm9;
    @include ms-md9;
    @include ms-lg9;
  }

  .column10 {
    @include ms-Grid-col;
    @include ms-sm10;
    @include ms-md10;
    @include ms-lg10;
  }
  
  .column12 {
    @include ms-Grid-col;
    @include ms-sm12;
    @include ms-md12;
    @include ms-lg12;
  }

  .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;
  }
  
  span, .k-dropdown {
    border-radius: 5px;
  }

  .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;
    border-radius: 5px;

    .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;
    }
  }

  .input {
    border-radius: 5px;
  }

  .select {
    border-radius: 5px;
  }
}

/* tslint:disable */
require("./ProjectName.module.css");
const styles = {
  'k-sr-only': 'k-sr-only_6c461fc7',
  'k-theme-test-class': 'k-theme-test-class_6c461fc7',
  'k-common-test-class': 'k-common-test-class_6c461fc7',
  'k-body': 'k-body_6c461fc7',
  'k-hstack': 'k-hstack_6c461fc7',
  'k-hbox': 'k-hbox_6c461fc7',
  'k-vstack': 'k-vstack_6c461fc7',
  'k-vbox': 'k-vbox_6c461fc7',
  'k-spacer': 'k-spacer_6c461fc7',
  'k-flex': 'k-flex_6c461fc7',
  'k-spacer-sized': 'k-spacer-sized_6c461fc7',
<deleted some "k-" styles to save space>
  'k-signature-md': 'k-signature-md_6c461fc7',
  'k-signature-lg': 'k-signature-lg_6c461fc7',
  otdmpWebPartsCoordinatorDashboard: 'otdmpWebPartsCoordinatorDashboard_6c461fc7',
  container: 'container_6c461fc7',
  header: 'header_6c461fc7',
  rowLight: 'rowLight_6c461fc7',
  row: 'row_6c461fc7',
  column1: 'column1_6c461fc7',
  'ms-Grid': 'ms-Grid_6c461fc7',
  column2: 'column2_6c461fc7',
  column3: 'column3_6c461fc7',
  column4: 'column4_6c461fc7',
  column5: 'column5_6c461fc7',
  column6: 'column6_6c461fc7',
  column7: 'column7_6c461fc7',
  column8: 'column8_6c461fc7',
  column9: 'column9_6c461fc7',
  column10: 'column10_6c461fc7',
  column12: 'column12_6c461fc7',
  title: 'title_6c461fc7',
  subTitle: 'subTitle_6c461fc7',
  description: 'description_6c461fc7',
  button: 'button_6c461fc7',
  label: 'label_6c461fc7',
  input: 'input_6c461fc7',
  select: 'select_6c461fc7',
  loading: 'loading_6c461fc7',
  'k-animation-blink': 'k-animation-blink_6c461fc7'
};

export default styles;
/* tslint:enable */