Today I Learned: Using SCSS in your Vue Components
By- November 13, 2018
If you haven’t yet looked into Vue.js, it might be time to. The front-end framework is a powerful, progressive alternative to its main rivals, Facebook’s React and Google-backed Angular, and has been continuously gaining traction among the open source community.
In this way, the CSS for a given component lives alongside the rest of its code, and with the
scoped attribute, will scope all style to only this component - preventing it from bleeding outwards and affecting global styling in unpredictable ways.
One might notice, however, that throughout much of Vue’s documentation and in countless tutorials, guides, and articles on all things Vue, the language used to this styling plain, vanilla CSS. In a world where SCSS exists, with it’s support for variables, mixins, and nested styles, can we do better? Yes we can.
Styling your Vue components with SCSS is incredibly simple - provided you have the right configuration.
Above is an example
webpack.config that makes use of
vue-loader. You’ll want to install both the
node-sass packages first, however.
npm install -D sass-loader node-sass
Once you’re configured, simply add a
lang attribute to the style tags in your components:
And you’re set! Enjoy all the features of SCSS in your Vue components.