In the client-side-libraries section for learning AEM, there is a section that asks the user to overwrite the scss files downloaded through git with wknd-base-styles-src-v3.zip. Once this is overwritten, npm run watch will report a failed build, and mvn clean install also reports a failed build.
The fix is to add @use 'sass:math'; to aem-guides-wknd/ui.frontend/src/main/webpack/components/_image.scss which resolves the error.
Expected Behaviour
The sass files provided in the zip should build correctly.
Actual Behaviour
Overwriting the original files with the files provided in the zip in the tutorial will cause a build error.
Reproduce Scenario (including but not limited to)
Steps to Reproduce
Start off on a clean branch of tutorial/client-side-libraries-start
In the client-side-libraries section for learning AEM, there is a section that asks the user to overwrite the scss files downloaded through git with wknd-base-styles-src-v3.zip. Once this is overwritten, npm run watch will report a failed build, and mvn clean install also reports a failed build.
The fix is to add
@use 'sass:math';to aem-guides-wknd/ui.frontend/src/main/webpack/components/_image.scss which resolves the error.Expected Behaviour
The sass files provided in the zip should build correctly.
Actual Behaviour
Overwriting the original files with the files provided in the zip in the tutorial will cause a build error.
Reproduce Scenario (including but not limited to)
Steps to Reproduce
Platform and Version
macOS AEM SDK (May 06)
Sample Code that illustrates the problem
Logs taken while reproducing problem
[INFO] Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): [INFO] SassError: There is no module with the namespace "math". [INFO] ╷ [INFO] 23 │ margin-top: math.div($gutter-padding, 2); [INFO] │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [INFO] ╵ [INFO] src/main/webpack/components/_image.scss 23:21 @import [INFO] src/main/webpack/site/main.scss 5:1662 root stylesheet