@@ -115,6 +115,80 @@ See [the Sass website][js api] for full API documentation.
115
115
116
116
[ js api ] : https://sass-lang.com/documentation/js-api
117
117
118
+ #### Dart Sass in the Browser
119
+
120
+ The ` sass ` npm package can also be run directly in the browser. It's compatible
121
+ with all major web bundlers as long as you disable renaming (such as
122
+ [ ` --keep-names ` ] in esbuild). You can also import it directly from a browser as
123
+ an ECMAScript Module without any bundling (assuming ` node_modules ` is served as
124
+ well):
125
+
126
+ [ `--keep-names` ] : https://esbuild.github.io/api/#keep-names
127
+
128
+ ``` html
129
+ <script type =" importmap" >
130
+ {
131
+ " imports" : {
132
+ " immutable" : " ./node_modules/immutable/dist/immutable.es.js" ,
133
+ " sass" : " ./node_modules/sass/sass.default.js"
134
+ }
135
+ }
136
+ </script >
137
+
138
+ <!-- Support browsers like Safari 16.3 without import maps support. -->
139
+ <script async src =" https://unpkg.com/es-module-shims@^1.7.0" crossorigin =" anonymous" ></script >
140
+
141
+ <script type =" module" >
142
+ import * as sass from ' sass' ;
143
+
144
+ console .log (sass .compileString (`
145
+ .box {
146
+ width: 10px + 15px;
147
+ }
148
+ ` );
149
+ < / script>
150
+ ` ` `
151
+
152
+ Or from a CDN:
153
+
154
+ ` ` ` html
155
+ < script type= " importmap" >
156
+ {
157
+ " imports" : {
158
+ " immutable" : " https://unpkg.com/immutable@^4.0.0" ,
159
+ " sass" : " https://unpkg.com/sass@^1.63.0/sass.default.js"
160
+ }
161
+ }
162
+ < / script>
163
+
164
+ <!-- Support browsers like Safari 16.3 without import maps support. -->
165
+ < script async src= " https://unpkg.com/es-module-shims@^1.7.0" crossorigin= " anonymous" >< / script>
166
+
167
+ < script type= " module" >
168
+ import * as sass from ' sass' ;
169
+
170
+ console .log (sass .compileString (`
171
+ .box {
172
+ width: 10px + 15px;
173
+ }
174
+ ` );
175
+ < / script>
176
+ ` ` `
177
+
178
+ Or even bundled with all its dependencies:
179
+
180
+ ` ` ` html
181
+ < script type= " module" >
182
+ import * as sass from ' https://jspm.dev/sass' ;
183
+
184
+ console .log (sass .compileString (`
185
+ .box {
186
+ width: 10px + 15px;
187
+ }
188
+ ` );
189
+ < / script>
190
+ ` ` `
191
+
118
192
#### Legacy JavaScript API
119
193
120
194
Dart Sass also supports an older JavaScript API that's fully compatible with
0 commit comments