diff --git a/packages/web/README.md b/packages/web/README.md
index 67bebfaf48..f39a53a960 100644
--- a/packages/web/README.md
+++ b/packages/web/README.md
@@ -33,8 +33,8 @@ in your HTML template:
 
 ### Advanced Implementation in Product with Sass
 
-❗ **Important:** Make sure you have
-[configured Sass load path][configuring-load-path] for `@tokens` and
+❗ **Important:** Make sure you have `sass` dependency installed in your project (`sass` is marked as optional peer dependency since you can use the pre-built distribution CSS).
+And also [configure Sass load path][configuring-load-path] for `@tokens` and
 `node_modules` so all dependencies are resolved correctly by Sass.
 
 Having the Sass load path configured, import just the components you need in
diff --git a/packages/web/package.json b/packages/web/package.json
index 619164a8aa..ee1cf920df 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -89,7 +89,12 @@
     "vite-plugin-handlebars": "1.6.0"
   },
   "peerDependencies": {
-    "sass": ">=1.57.0"
+    "sass": ">=1.57.0 < 2"
+  },
+  "peerDependenciesMeta": {
+    "sass": {
+      "optional": true
+    }
   },
   "nx": {
     "targets": {