Skip to content

Allow to use Dart Sass instead of Node Sass #517

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 2 commits into from
Mar 1, 2019

Conversation

Lyrkan
Copy link
Collaborator

@Lyrkan Lyrkan commented Feb 10, 2019

This PR closes #422 by allowing sass (Dart Sass) as an alternative choice to node-sass.


The sass-loader allows to set the implementation that should be used to process Sass files. It currently accepts either sass or node-sass (default):

In theory this can already be used by setting the related option when calling Encore.enableSassLoader(), but Encore then throws an error asking you to install node-sass, even if you already have sass installed.

One way to prevent that could be to detect when options.implementation is set but in its next version the sass-loader will automatically detect which implementation is installed and use it accordingly.

So, instead of doing that, this PR allows to define alternative packages in our feature.js file, for instance:

const features = {
    sass: {
        method: 'enableSassLoader()',
        packages: [
            { name: 'sass-loader', enforce_version: true },
            [{ name: 'node-sass' }, { name: 'sass' }] // Will allow both `node-sass` and `sass`
        ],
        description: 'load Sass files'
    },
    // ...
}

If neither node-sass or sass is available, the error message will display both choices, and recommend the first one in the yarn add advice:

image

Note that for now using Dart Sass still requires the implementation option to be set:

Encore.enableSassLoader(options => {
    options.implementation = require('sass');
});

This shouldn't be a big issue since the default recommendation is still to use node-sass.

@weaverryan
Copy link
Member

Wow! That's a really excellent solution. Thanks for the research and nice feature - love it!

@weaverryan weaverryan merged commit 4e90bf8 into symfony:master Mar 1, 2019
weaverryan added a commit that referenced this pull request Mar 1, 2019
…verryan)

This PR was merged into the master branch.

Discussion
----------

Allow to use Dart Sass instead of Node Sass

This PR closes #422 by allowing `sass` (Dart Sass) as an alternative choice to `node-sass`.

---

The `sass-loader` allows to set the implementation that should be used to process Sass files. It currently accepts either `sass` or `node-sass` (default):

In theory this can already be used by setting the related option when calling `Encore.enableSassLoader()`, but Encore then throws an error asking you to install `node-sass`, even if you already have `sass` installed.

One way to prevent that could be to detect when `options.implementation` is set but in its next version the `sass-loader` will [automatically detect](webpack-contrib/sass-loader@ff90dd6) which implementation is installed and use it accordingly.

So, instead of doing that, this PR allows to define alternative packages in our `feature.js` file, for instance:

```js
const features = {
    sass: {
        method: 'enableSassLoader()',
        packages: [
            { name: 'sass-loader', enforce_version: true },
            [{ name: 'node-sass' }, { name: 'sass' }] // Will allow both `node-sass` and `sass`
        ],
        description: 'load Sass files'
    },
    // ...
}
```

If neither `node-sass` or `sass` is available, the error message will display both choices, and recommend the first one in the `yarn add` advice:

![image](https://user-images.githubusercontent.com/850046/52538612-0338fa00-2d75-11e9-8d89-146fe7ee27eb.png)

Note that for now using Dart Sass still requires the `implementation` option to be set:

```js
Encore.enableSassLoader(options => {
    options.implementation = require('sass');
});
```

This shouldn't be a big issue since the default recommendation is still to use `node-sass`.

Commits
-------

4e90bf8 clarifying comment
1346ee5 Allow to use Dart Sass instead of Node Sass
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dart Sass? (Sass implementation customization)
2 participants