vuejs / component-compiler-utils

Lower level utilities for compiling Vue single file components
319 stars 75 forks source link

Allow both node-sass and sass #80

Open dkonchekov opened 4 years ago

dkonchekov commented 4 years ago

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.

tim-janik commented 4 years ago

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.