Skip to content

Commit afbe114

Browse files
feat: added sass-embedded support and the api option
1 parent ff8d078 commit afbe114

30 files changed

+388635
-190548
lines changed

README.md

+46-1
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,16 @@ or
3939
pnpm add -D sass-loader sass webpack
4040
```
4141

42-
`sass-loader` requires you to install either [Dart Sass](https://github.com/sass/dart-sass) or [Node Sass](https://github.com/sass/node-sass) on your own (more documentation can be found below).
42+
`sass-loader` requires you to install either [Dart Sass](https://github.com/sass/dart-sass), [Node Sass](https://github.com/sass/node-sass) on your own (more documentation can be found below) or [Sass Embedded](https://github.com/sass/embedded-host-node).
4343

4444
This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.
4545

4646
> ℹ️ We highly recommend using [Dart Sass](https://github.com/sass/dart-sass).
4747
4848
> [Node Sass](https://github.com/sass/node-sass) does not work with [Yarn PnP](https://classic.yarnpkg.com/en/docs/pnp/) feature and doesn't support [@use rule](https://sass-lang.com/documentation/at-rules/use).
4949
50+
> [Sass Embedded](https://github.com/sass/embedded-host-node) is experimental and in `beta`, therefore some features may not work
51+
5052
Chain the `sass-loader` with the [css-loader](https://github.com/webpack-contrib/css-loader) and the [style-loader](https://github.com/webpack-contrib/style-loader) to immediately apply all styles to the DOM or the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract it into a separate file.
5153

5254
Then add the loader to your Webpack configuration. For example:
@@ -712,6 +714,49 @@ module.exports = {
712714
};
713715
```
714716

717+
### `api`
718+
719+
Type:
720+
721+
```ts
722+
type api = "legacy" | "modern";
723+
```
724+
725+
Default: `"legacy"`
726+
727+
Allows you to switch between `legacy` and `modern` API. You can find more information [here](https://sass-lang.com/documentation/js-api).
728+
729+
> ⚠ "modern" API is experimental, so some features may not work (known: built-in `importer` is not working and files with errors is not watching on initial run), you can follow this [here](https://github.com/webpack-contrib/sass-loader/issues/774).
730+
731+
> ⚠ The sass options are different for `modern` and `old` APIs. Please look at [docs](https://sass-lang.com/documentation/js-api) how to migrate on new options.
732+
733+
**webpack.config.js**
734+
735+
```js
736+
module.exports = {
737+
module: {
738+
rules: [
739+
{
740+
test: /\.s[ac]ss$/i,
741+
use: [
742+
"style-loader",
743+
"css-loader",
744+
{
745+
loader: "sass-loader",
746+
options: {
747+
api: "modern",
748+
sassOptions: {
749+
// Your sass options
750+
},
751+
},
752+
},
753+
],
754+
},
755+
],
756+
},
757+
};
758+
```
759+
715760
## Examples
716761

717762
### Extracts CSS into separate files

jest.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module.exports = {
2-
testEnvironment: "node",
2+
testEnvironment: "jest-environment-node-single-context",
33
};

0 commit comments

Comments
 (0)