Vue-cli: Error building component which contains lang="sass" in component style

[mikeerickson]

If my component is configured to use sass the vue build command fails

<style scoped lang="sass">

causes a slew of errors

If I remove the lang="sass" section, it builds successfully, but my component styles are not working correctly

[posva]

Hello! This is unrelated to vue-cli. You're probabyl missing the sass-loader so you simply have to install it with npm

[mikeerickson]

@posva well I do have it installed :). If I build project myself via my "webpack.prod.config.js" then it doesn't throw this error (but my webpack config is having issues building UMD)

[LinusBorg]

The rules about support questions apply to this repository as well, @mikeerickson

You probably encountered this: http://vue-loader.vuejs.org/en/configurations/pre-processors.html#sass-loader-caveat

[mikeerickson]

Hey Linus

I am sure you are already sick of me.

Having said that, is the error occurs when I am using the Vue-cli to build the project (not my own code) this is why I came here.

TL;DR error thrown by "vue build --lib --prod" command (this it is using an internal webpack config)?

[mikeerickson]

So, if I do as you have said above

<style scoped lang="scss">

The CLI building throws

ERROR in ./HelloWorld.vue
Module not found: Error: Can't resolve 'sass-loader' in '/Users/mikee/Documents/Projects/dev/vue/cd-vue-component-starter/src/js'
 @ ./HelloWorld.vue 3:0-561
 @ multi HelloWorld.vue

But I can assure you, sass-loader is installed

    "sass-lint": "1.10.2",
    "sass-loader": "6.0.2",
    "sasslint-loader": "0.0.1",
    "style-loader": "0.13.1",

But since this is not a bug with vue-cli I will refrain from polluting this thread anymore (but I still personally maintain that it is NOT my issue)

I guess we will have to agree to disagree on this one as well

[LinusBorg]

what is the exact command that you executed, and in which directory did you execute it? against which file?

You have to cut us some slack here, I really have a hard time following what you did to produce this error.

[mikeerickson]

@LinusBorg Dont sweat it... I have taken enough of your time.

[LinusBorg]

I assume you tried to run that command not in your project directory, but in the subdirector where the .vue file is.

Since in that subfolder, there is no node_modules folder (it's in a folder higher up in your project root), the webpack loader resolve mechanism doesn't pick it up.

[mikeerickson]

@linusborg I have tried to reply to your message in the Vue forum but I am not permitted to send more than 4 messages. It tells me I have to wait for 4 hours. So I am reaching out here.

[LinusBorg]

forum posting should now work again. It's a stupid limitation setting from the discourse forum we use, no idea how to turn it off, but I can circumvent it. please try.

[MuhammadimYusoff]

Hello guys I know this issue kinda old but I am facing it right now on 2020,
I am following this guy Tut,
https://youtu.be/A5S23KS_-bU?list=PLEhEHUEU3x5q-xB1On4CsLPts0-rZ9oos&t=525

as at that time, he installed sass-loader, I followed him installing sass-loader within my project directory and when I set lang="scss" at like at 9:12, this error occur although I left it empty.

Do I need to declare the lang="scss" thing?

[LinusBorg]

This is evidently a usage question which you please move to forum.vuejs.org or chat.vuejs.org

This issue is resolved.

If you think this to be a bug, please follow the issue guidelines for opening a new bug issue.