component-compiler-utils
component-compiler-utils copied to clipboard
Allow both node-sass and sass
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.
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.