Learn Vue JS course Learn Javascript and Vue JS Learn VueJS course Learn VueJS Tutorial

Vue 3 Single File Components

Using CSS Pre-Processors with Single File Components thumbnail image

Get access to the most comprehensive Vue.js video library in the world. Over 300 video lessons including the newest Vue 3 features.

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