How to use SASS / SCSS with latest vue-cli starter project?

webpack sass vue.js vuejs2 vue-component

you install the necessary dependencies
npm install -D node-sass sass-loader
for global styles, simply import the file into main.js:
import './styles/my-styles.scss'
in .vue files, add the lang to the <style> element.
<style lang="scss">

If using webstorm:

<style lang="scss" rel="stylesheet/scss">

webpack sass vue.js vuejs2 vue-component

As Latest documentation of @vue/cli-service": "^3.9.0", first need to install two npm dev dependencies i.e. sass, sass-loader

Sass

npm install -D sass-loader sass

yarn add --dev sass-loader sass

Then you can import the corresponding file types, or use them in *.vue files with:

<style lang="scss">  $color: red;</style>

webpack sass vue.js vuejs2 vue-component

Add this in your package.json in scripts and run

"compile:sass": "node-sass 'your main scss file location' 'your compiled css file location' -w"

Please make sure that node-sass and sass-loader are added properly.

And then in you App.vue file add this, then run

<style lang="scss">    @import 'your compiled css file location';</style>

This works for me.

Thanks

CodeHunter