Using SCSS `:export` causes webpack error: "Error: Module parse failed: Unexpected token"

Question

I want to use variables defined in SCSS in TypeScript modules in a Angular app. An quite elegant way seems to use SCSS :export, see this question or this one or this one.

But when I use :export in one of my SCSS files, I get an webpack error:

./src/styles/_export.scss:16:0 - Error: Module parse failed: Unexpected token (16:0)
File was processed with these loaders:
 * ./node_modules/.pnpm/resolve-url-loader@5.0.0/node_modules/resolve-url-loader/index.js
 * ./node_modules/.pnpm/sass-loader@13.0.2_sass@1.54.4+webpack@5.74.0/node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| 
| 
> :export {
|   dialogWidth: 600px;
|   sidenavWidthExpanded: 280px;

Error: src/app/modules/help/services/help.service.ts:12:29 - error TS2307: Cannot find module '@styles/_export.scss' or its corresponding type declarations.

Any idea what is missing?
Is there another loader required as the error message suggests?
Is anything outdated?

In fact, I'm not quite sure which tool would process the :export as it does not seem to be a SASS feature, but rather ICSS as pointed out by PaulCo.

Looking at my pnpm-lock.yaml it seems that 3 different versions of the css-loader are used (and all depend on some version of icss-utils), no idea which one of those is in fact used to build:

  /css-loader/3.6.0_webpack@4.46.0:
    resolution: {integrity: sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==}
    engines: {node: '>= 8.9.0'}
    peerDependencies:
      webpack: ^4.0.0 || ^5.0.0
    dependencies:
      camelcase: 5.3.1
      cssesc: 3.0.0
      icss-utils: 4.1.1
      loader-utils: 1.4.0
      normalize-path: 3.0.0
      postcss: 7.0.39
      postcss-modules-extract-imports: 2.0.0
      postcss-modules-local-by-default: 3.0.3
      postcss-modules-scope: 2.2.0
      postcss-modules-values: 3.0.0
      postcss-value-parser: 4.2.0
      schema-utils: 2.7.1
      semver: 6.3.0
      webpack: 4.46.0

  /css-loader/5.2.7_webpack@5.74.0:
    resolution: {integrity: sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==}
    engines: {node: '>= 10.13.0'}
    peerDependencies:
      webpack: ^4.27.0 || ^5.0.0
    dependencies:
      icss-utils: 5.1.0_postcss@8.4.18
      loader-utils: 2.0.3
      postcss: 8.4.18
      postcss-modules-extract-imports: 3.0.0_postcss@8.4.18
      postcss-modules-local-by-default: 4.0.0_postcss@8.4.18
      postcss-modules-scope: 3.0.0_postcss@8.4.18
      postcss-modules-values: 4.0.0_postcss@8.4.18
      postcss-value-parser: 4.2.0
      schema-utils: 3.1.1
      semver: 7.3.8
      webpack: 5.74.0

  /css-loader/6.7.1_webpack@5.74.0:
    resolution: {integrity: sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==}
    engines: {node: '>= 12.13.0'}
    peerDependencies:
      webpack: ^5.0.0
    dependencies:
      icss-utils: 5.1.0_postcss@8.4.18
      postcss: 8.4.18
      postcss-modules-extract-imports: 3.0.0_postcss@8.4.18
      postcss-modules-local-by-default: 4.0.0_postcss@8.4.18
      postcss-modules-scope: 3.0.0_postcss@8.4.18
      postcss-modules-values: 4.0.0_postcss@8.4.18
      postcss-value-parser: 4.2.0
      semver: 7.3.8
      webpack: 5.74.0_esbuild@0.15.5

Using SCSS `:export` causes webpack error: "Error: Module parse failed: Unexpected token"

0 Answers0