Using CSS Pre-Processors with Single File Components

Vue-cli makes it very easy for us to use pre-processors like Pug, Less, Stylus, or Sass with our Single File Components.

In this lesson, we’ll learn how to use SCSS (Sassy CSS) in our Vue.js 3 Single File Components.

Install sass-loader and node-sass

yarn add sass-loader@^10 sass --dev
# OR
npm install -D sass-loader@^10 sass

Remember to restart your development server after installing new node modules

yarn serve
# OR
npm run serve

Links

• Using Global SCSS Variables