Skip to content

Allow to use Dart Sass instead of Node Sass #517

New issue

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

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

Already on GitHub? Sign in 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in 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