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

Question

I need to use SASS or SCSS in my project.

I used the vue-cli to make the latest version of a starter project.

Anyone had any success in making sass/scss work in the newest starter project with webpack?

Solution 1

1. you install the necessary dependencies

   npm install -D node-sass sass-loader

2. for global styles, simply import the file into main.js:

   import './styles/my-styles.scss'

3. in .vue files, add the lang to the <style> element.

   <style lang="scss">

If using webstorm:

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

Solution 2

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>

Refer to latest documentation here