Module parse failed: Unexpected character '@'

Environment Information

Package version(s): "@fluentui/react": "8.63.1",
Browser and OS versions: Edge, Windows 10

Describe the issue:

We are trying to upgrade the fluent ui version from 7.x.x to 8.63.1 and we have used @import in scss file to include reference scss and we are facing the below mentioned issue Module parse failed: Unexpected character '@'

while trying to load the fluentui references.scss @import '~@fluentui/react/dist/sass/References.scss';

@include is also not working in scss file SPFx has also been upgraded from 1.14.0 to 1.17.4.

Actual behavior:

Throws error "Module parse failed: Unexpected character '@'"

Expected behavior:

Should be able to include the references.scss file in my module.scss file

If applicable, please provide a codepen repro:

My package json is as shown below { "name": "Project", "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", "serve": "gulp bundle --custom-serve --max_old_space_size=4096 && fast-serve" }, "dependencies": { "@fluentui/react": "8.63.1", "@microsoft/decorators": "1.17.4", "@microsoft/sp-adaptive-card-extension-base": "1.17.4", "@microsoft/sp-application-base": "1.17.4", "@microsoft/sp-core-library": "1.17.4", "@microsoft/sp-dialog": "1.17.4", "@microsoft/sp-lodash-subset": "1.17.4", "@microsoft/sp-office-ui-fabric-core": "1.17.4", "@microsoft/sp-property-pane": "1.17.4", "@microsoft/sp-webpart-base": "1.17.4", "@pnp/graph": "2.0.13", "@pnp/sp": "2.0.13", "@pnp/spfx-controls-react": "2.1.0", "@uifabric/file-type-icons": "7.10.11", "alasql": "0.6.0", "css-modules-typescript-loader": "4.0.0", "d3": "5.16.0", "d3-tip": "0.9.1", "dompurify": "2.3.4", "file-saver": "2.0.2", "jsonwebtoken": "8.5.1", "jszip": "3.4.0", "jszip-utils": "0.1.0", "moment-timezone": "0.5.28", "office-ui-fabric-react": "7.199.1", "react": "17.0.1", "react-big-calendar": "0.33.2", "react-bootstrap-typeahead": "5.2.0", "react-dom": "17.0.1", "react-dropzone": "11.0.1", "react-toast-notifications": "2.5.1", "react-toastify": "6.0.8", "rx-lite": "4.0.8", "sass-loader": "8.0.2", "topojson-client": "3.1.0", "ts-loader": "6.2.1", "tslib": "2.3.1", "webpack": "5.88.2" }, "devDependencies": { "@microsoft/eslint-config-spfx": "1.17.4", "@microsoft/eslint-plugin-spfx": "1.17.4", "@microsoft/rush-stack-compiler-3.9": "0.4.47", "@microsoft/rush-stack-compiler-4.5": "0.5.0", "@microsoft/sp-build-web": "1.17.4", "@microsoft/sp-module-interfaces": "1.17.4", "@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", "css-loader": "6.8.1", "eslint": "8.7.0", "eslint-plugin-react-hooks": "4.3.0", "gulp": "~4.0.2", "spfx-fast-serve-helpers": "1.15.4", "style-loader": "3.3.3", "typescript": "4.5.5" } }

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? (Yes, No) No

Requested priority: Blocking

Products/sites affected: (if applicable)

microsoft / fluentui