0
votes

I am trying to use scss in the vue3 app. I get following error.

./src/components/SinglePost.vue?vue&type=style&index=0&id=164ef990&lang=scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/SinglePost.vue?vue&type=style&index=0&id=164ef990&lang=scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader (/usr/src/app/node_modules/sass-loader/dist/index.js:25:24)

I have followed the instructions given on https://vue-loader.vuejs.org/guide/pre-processors.html page. I am using vue-cli-service serve to start the server. Code in the singlepost.vue is as follow, I am not sure if creation of webpack.config.js file would be necessary if this command is used to start the service.

<style lang="scss">
.btn {
    &,
    &:link,
    &:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.5rem 4rem;
    display: inline-block;
    border-radius: 10rem;
    transition: all .3s;
    position: relative;
    //  
    }
.....etc etc 
</style>

Please guide me, I am new to web development.

2
Hey maybe a bit late, but I have downgraded my sass-loader to 10.1.1 using the command: npm install sass-loader@^10.1.1Valdemar Vreeman

2 Answers

4
votes

Or run

npm install -D [email protected] sass
0
votes

These two packages solved the issue,

"node-sass": "^4.0.0",
"sass-loader": "^7.0.0"