Overriding third-party frameworks' SCSS: How its done (SCSS)

#css #npm #javascript

Introduction and backstory

We have all been there. You're working on a project and decided to use a third-party framework for the design on the website. Everything is going smooth and fine, you're maybe using a few of its component. Everything is looking good in a short moment of time.

But after working on it for a while, you look at the design and almost vomit. You don't like how each component have rounded corners by default. You know some CSS and apply

border-radius: 0;
Everything should been flat, right?
Wrong!
It is still the same design and in the framework's documentation, there's no option for disable round corners. You spend hours and hours trying to debug the code and search the web without any result.

This is based on a real problem I had the last few days until I solved it by...

Overriding its scss

First of all, you're going to need SCSS for this tutorial
'npm install -g sass'

After installation, make a main SCSS file, main.scss
We want to then import the framework's css in the main file, using @import

//FRAMEWORK
@import "~vuesax/dist/vuesax.css";

Then you need to find what classes you want to override in the framework, for me I want to make all vuesax cards have no border-radius. After some research, the styling is under the class .vs-card

Write the class name above the import and apply your custom CSS.

.vs-card{
border-radius: 0;
}

@import "~vuesax/dist/vuesax.css";

Import main.scss to your project and see your CSS overriding the framework's CSS.

Hope this helps you :)

Some words

This is my first blog post I've written to Dev.to as well a blog post in general. I decided to take the time to write this because on the web, I barely found any information on how to apply your CSS to a framework.
Wrote this at 1 AM in joy after finding the solution.