Skip to content

Commit 1c9a5e1

Browse files
authored
Document browser support (#1972)
1 parent cca9464 commit 1c9a5e1

File tree

1 file changed

+74
-0
lines changed

1 file changed

+74
-0
lines changed

README.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,80 @@ See [the Sass website][js api] for full API documentation.
115115

116116
[js api]: https://sass-lang.com/documentation/js-api
117117

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+
118192
#### Legacy JavaScript API
119193
120194
Dart Sass also supports an older JavaScript API that's fully compatible with

0 commit comments

Comments
 (0)