1

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/[email protected]/node_modules/resolve-url-loader/index.js
 * ./node_modules/.pnpm/[email protected][email protected][email protected]/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/[email protected]:
    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/[email protected]:
    resolution: {integrity: sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==}
    engines: {node: '>= 10.13.0'}
    peerDependencies:
      webpack: ^4.27.0 || ^5.0.0
    dependencies:
      icss-utils: [email protected]
      loader-utils: 2.0.3
      postcss: 8.4.18
      postcss-modules-extract-imports: [email protected]
      postcss-modules-local-by-default: [email protected]
      postcss-modules-scope: [email protected]
      postcss-modules-values: [email protected]
      postcss-value-parser: 4.2.0
      schema-utils: 3.1.1
      semver: 7.3.8
      webpack: 5.74.0

  /css-loader/[email protected]:
    resolution: {integrity: sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==}
    engines: {node: '>= 12.13.0'}
    peerDependencies:
      webpack: ^5.0.0
    dependencies:
      icss-utils: [email protected]
      postcss: 8.4.18
      postcss-modules-extract-imports: [email protected]
      postcss-modules-local-by-default: [email protected]
      postcss-modules-scope: [email protected]
      postcss-modules-values: [email protected]
      postcss-value-parser: 4.2.0
      semver: 7.3.8
      webpack: [email protected]

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.