Sass Packages is Not Supported

[evanleck]

Maybe there's a good reason for it, but it strikes me as odd that "node-sass" is required when sass is listed on the installation page. I'm currently using sass with Parcel and installing both sass and node-sass isn't an option, so the requiring node-sass is making testing basically impossible for me. Would it be possible to use one or the other, or provide an option to skip style compilation altogether?

Thank you!

[LinusBorg]

The answer is to be found directly on the installation page that you linked to:

However, please note that this will install the pure JavaScript implementation of Sass, which runs somewhat slower than the other options listed here. But it has the same interface, so it'll be easy to swap in another implementation later if you need a bit more speed!

TBH in my personal experience I haven'T come across a project using sass in ages, node-sass (or dart-sass) seem to be much more common. I assume Edd had similar experiences and just settled on node-sass.

installing both sass and node-sass isn't an option

Why? Are there technical problems or conflicts?

or provide an option to skip style compilation altogether?

Already possible:

{
  "jest": {
    "globals": {
      "vue-jest": {
        "experimentalCSSCompile": true
      }
    }
  }
}

Relevant documentation:

https://github.com/vuejs/vue-jest#css-options

[evanleck]

Well hot damn! Turning off CSS compilation did the trick, thank you!

Yeah, I realize node-sass is faster, I'm just trying to figure out why it would be required when sass should work just as well. The sass package is dart-sass compiled to JavaScript so it technically is the "reference implementation of Sass". It seems like using the reference implementation should at least be an option when using this package.

Parcel has support for node-sass but there's a bug that's mentioned in the docs so they default to sass. Installing node-sass basically kicks Parcel over to use that instead of sass and there are oddities there that I'm trying to avoid by using sass.

Anyway, my issue was solved by disabling experimentalCSSCompile so thank you for pointing that out!

[aldarund]

TBH in my personal experience I haven'T come across a project using sass in ages

FYI -> vuetify 2 (currently in beta) requires specifically sass and not node-sass, so if someone want to use vuetify and sass in their project they are forced to also install node-sass just for vue-jest.

[dkonchekov]

Hi!
vue-cli wizard allows to select the options: dart-sass, jest.
But this combination fails when CSS Modules are used because of node-sass requirement.
experimentalCSSCompile flag is not solution because we need test classes in jest.
Having both node-sass and sass discredit the idea of use sass instead node-sass.

You have @vue/component-compiler-utils@^2.4.0 dependency that in 3.x version has dropped node-sass in favor of sass.

Have you any plans to update your @vue/component-compiler-utils?

I think it will be better if @vue/component-compiler-utils delegate choice of preprocessor implementation to user as it is done in sass-loader (https://github.com/webpack-contrib/sass-loader/blob/master/src/getDefaultSassImplementation.js) and move node-sass and sass to peerDependencies.

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.

[JessicaSachs]

@dkonchekov thanks for pointing this out. Are you using version 3.x of vue-jest? That's what comes out of the box with the Vue CLI jest plugin

[JessicaSachs]

#209 should solve this. We need to get the Vue CLI Jest plugin onto the latest major version of vue-jest, but if you install the beta for vue-jest you should see this working.