component-compiler-utils icon indicating copy to clipboard operation
component-compiler-utils copied to clipboard

Allow both node-sass and sass

Open dkonchekov opened this issue 5 years ago • 1 comments

We have issue with vue-jest, that uses this package. (https://github.com/vuejs/vue-jest/issues/137#issuecomment-589600979). It would be nice to borrow experience on sass-loader and provide a choice of what to use: node-sass or sass (https://github.com/webpack-contrib/sass-loader/blob/master/src/getDefaultSassImplementation.js)

sass-loader requires you to install either Node Sass or Dart Sass on your own (more documentation can be found below). This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.

dkonchekov avatar Feb 21 '20 10:02 dkonchekov

I also ran into issues with dart sass being used. Here is a snippet it doesn't parse well and errors out (much reduced from the original case):

<style lang="scss">
  $xsize: 10;
  body {
    --xsize: #{$xsize};
    padding: max(5,7) * 1px var(--xsize);
  }
</style>

This produces:

[!] (plugin VuePlugin) Error: Error: Undefined operation "max(5, 7) * 1px".

But changing lib/styleProcessors/index.ts to load 'node-sass' again fixes the issue.

tim-janik avatar Jun 17 '20 22:06 tim-janik