Create presets for SASS and LESS

[eliperelman]

No description provided.

[sotayamashita]

@eliperelman I'm creating SASS one. After finishing it and it is ok, could I transfer ownership to this organisation?

[eliperelman]

@sotayamashita if you would like the SASS preset to live with Neutrino, it would need to be placed in packages with appropriate docs. Could you do that, or would you like to keep this separate?

[sotayamashita]

@eliperelman I could do that. After creating it, I'll share the repo and please review this.

[eliperelman]

Absolutely!

[tk-o]

Hey @sotayamashita! I couldn't find the preset you were about to created, so I published it myself.
I read that additional presets should be maintained on external repositories and I am not sure now if I should create a PR for my work.
Anyway, I'd like to ask you and @eliperelman to review that small SASS preset . I am going to extend it with optional PostCSS as well.

[sotayamashita]

@kopacki Sorry, I have not published my code yet because I am busy. I appreciate your work. I will create PR for your commit. 👍 I will implement for less.

[tk-o]

I must say I have huge problem to add extract-text-webpack-plugin to the preset. Help with that one would be much appreciated.

So far I've done following:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = function({ config }) {
  config
    .plugin('extractCss')
      .use(ExtractTextPlugin, {
        filename: 'style.css',
        disable: false,
        allChunks: true
      });

  const styleRule = config.module
    .rule('scss');

  ExtractTextPlugin
    .extract({
      fallback: 'style-loader',
      use: ['css-loader', 'sass-loader']
    })
    .forEach(({ loader, options }, index) => styleRule.loader(index, loader, options));
}

But it causes compilation errors I haven't resolved yet.

[hugufc]

Depending on v5 release date I think it could be a neutrino-middleware-sass.

[barraponto]

FWIW, I created a PostCSS base preset. PostCSS supports parsing LESS/SASS/Stylus/SugarSS so I guess you can build on top of it. https://github.com/barraponto/neutrino-preset-postcss

[barraponto]

@kopacki reviewing your preset, the only issue i see is you don't really need to require path in https://github.com/kopacki/neutrino-dev/blob/master/packages/neutrino-preset-sass/src/index.js

[eirikurn]

I've been able to get ExtractTextPlugin working in neutrino, but only by manually implementing ExtractTextPlugin.extract logic in the preset.

Guess we should move that discussion to a new issue in webpack-chain.

[eliperelman]

@eirikurn agreed, if you think there are some changes we should make to webpack-chain to make this use case easier, let's see if we can find a solution!

[eliperelman]

Closing, as this issue seems to be mostly handled by the community. We will pick up the webpack-chain features on that repo.

[jnachtigall]

@eliperelman I'm using CRA at the moment, but I am not very happy with it because SASS/SCSS support is only possible with workarounds. I was following this ticket to learn how to use SCSS with neutrino (or to be informed when it will be possible), but now you closed with referencing to "the community". Do you have a link or pointers on how to enable SCSS with neutrino?

[barraponto]

@jnachtigall the postcss preset is basically just this: https://github.com/barraponto/neutrino-preset-postcss/blob/master/src/index.js

If you change postcss-loader for sass-loader, you can make your own Sass preset :)
I don't use Sass (though i was an early adopter and contributed to Compass), so I wouldn't want to maintain such a preset. But maybe you could.

[seblambla]

Hi, is there any news about a sass-preset? Here's what I get with neutrino-sass-preset:

✖ Building project failed
TypeError: config.module.rule(...).test(...).loader is not a function

Thanks

[barraponto]

@seblambla are you asking for a sass-preset or reporting an issue against a sass-preset?

[seblambla]

I'm reporting an issue about this sass-preset but I don't know if this preset is stable as it's not mentioned in the doc's community packages section. If it's unstable I'll try to make my own preset from the postcss preset you mentioned above.

[barraponto]

@seblambla consider opening issues in the sass preset issue queue, as it might get noticed by the authors.

[piu130]

@seblambla I created a PR for this.

[piu130]

@kopacki Could you publish the new changes to npm?