Vue.js SASS Template Style Tag (<style lang="sass">) Incorrectly Parsed As SCSS

[ginnwork]

🐛 bug report

Some tickets reported similar issues but I have isolated the cause and effect which you can see in my repo https://gitlab.com/enom/parcel-vue-sass

🎛 Configuration (.babelrc, package.json, cli command)

Run the following:

git clone git@gitlab.com:enom/parcel-vue-sass.git
cd parcel-vue-sass
yarn && yarn dev

The <style lang="sass"> is being parsed as SCSS instead of SASS. This is seems like a Webpack configuration where it's not using the right loader rule.

I unfortunately don't have time to correct this myself.

🤔 Expected Behavior

Parcel should parse Vue.js template <style lang="sass"> as SASS

😯 Current Behavior

The following error is displayed in console:

🚨  /var/www/parcel-vue-sass/src/App.vue: Invalid CSS after "#": expected 1 selector or at-rule, was "#app"
    at options.error (/var/www/parcel-vue-sass/node_modules/node-sass/lib/index.js:291:26)

💁 Possible Solution

Seems like a missing or misconfigured Webpack loader / rule.

🔦 Context

App development using Parcel, Vue.js, and SASS

💻 Code Sample

See https://gitlab.com/enom/parcel-vue-sass

🌍 Your Environment

Software	Version(s)
Parcel	1.7.1
Node	9.7.1
npm/Yarn	1.5.1 (Yarn)
Operating System	Linux (below)

$ uname -a
Linux vm 4.13.0-38-generic #43-Ubuntu SMP Wed Mar 14 15:20:44 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 17.10
Release:        17.10
Codename:       artful

[mubaidr]

I am having the same issue. Is there any way to pass parameter to node-sass while using parcel?

[DeMoorJasper]

SCSS and SASS are both being run through node-sass.
If anyone with node-sass or sass experience could look into this would be nice

[tremendus]

Interestingly enough, if you extract your sass into a separate sass file, and @include it, it works fine

<style lang="sass">
@import 'src/assets/styles/main.sass'
</style>

It just doesn't parse correctly when sass is inline.

[mubaidr]

It works fine because now the loader knows the file extension (sass) and correctly parse it as indented syntax (as individual sass files works too), so I believe this is Vue loader/Compiler issue.

[ginnwork]

How would I go isolating this issue further? I have time to dive deeper into this now so I'd like to get this working

[DeMoorJasper]

Finding a way to use the correct filetype in the sass parser should fix this @enom-infini

[MattAndDev]

Hi all, amazing project!!!!
I think I found a workaround for this, but I'm not so sure it's the correct place where to fix the issue.
Please see:
https://github.com/parcel-bundler/parcel/blob/master/src/assets/SASSAsset.js#L31
At this line opts.indentedSyntax is undefined and evaluates to false, as the file is .vue and not .sass so path.extname(this.name).toLowerCase() === '.sass' is not achieving the wanted result.
The workaround is to add the following if clause right after assigning opts.indentedSyntax (which evaluates always to false in single file vue components).

if (path.extname(this.name).toLowerCase() === '.vue') {
      opts.indentedSyntax = (this.options.rendition.type === 'sass') ? true : false
}

Apparently this.options.rendition.type resolves the correct sass/scss syntax type and I use that to set the correct value for opts.indentedSyntax.
This solved the problem for me, though I'm really new to parcel source code and I feel there's a better way to tackle this.
Happy to help further with a bit of guidance!!
📦🤘

[DeMoorJasper]

@MattAndDev Awesome! Seems like you've found the correct solution.

This can also happen on non vue assets (through plugins), that also allow inlining sass in the file.

Could you do a PR that changes this line?

opts.indentedSyntax = typeof opts.indentedSyntax === 'boolean' ? opts.indentedSyntax : path.extname(this.name).toLowerCase() === '.sass';

Into something like this:

let type = this.options.rendition ? this.options.rendition.type : path.extname(this.name).toLowerCase().substring(1);
opts.indentedSyntax = typeof opts.indentedSyntax === 'boolean' ? opts.indentedSyntax : type === 'sass';

[MattAndDev]

@DeMoorJasper Sure, I'm more then happy to help!
Will take a look at your proposal and prepare the PR! 🙌

[MattAndDev]

@DeMoorJasper let type will result in sass not .sass as this.options.rendition.type seems not to be a file extension.
Will adapt this to the following:

let type = this.options.rendition ? this.options.rendition.type : path.extname(this.name).toLowerCase().replace('.', '');
opts.indentedSyntax = typeof opts.indentedSyntax === 'boolean' ? opts.indentedSyntax : type === 'sass';

PR coming!