타사 프레임워크의 SCSS 재정의: 완료 방법(SCSS)

소개 및 뒷이야기

우리는 모두 거기에 있었다. 프로젝트를 진행 중이고 웹 사이트의 디자인에 타사 프레임워크를 사용하기로 결정했습니다. 모든 것이 순조롭게 진행되고 있습니다. 아마도 구성 요소 중 일부를 사용하고 있을 것입니다. 짧은 시간에 모든 것이 좋아 보입니다.

그런데 한참 작업하다 보면 디자인만 봐도 ​​토할 뻔. 기본적으로 각 구성 요소의 모서리가 둥근 방식이 마음에 들지 않습니다. CSS를 어느 정도 알고 적용합니다.

border-radius: 0;
모든 것이 평평해야 했어, 그렇지?
잘못된!
그것은 여전히 ​​​​동일한 디자인이며 프레임 워크의 문서에는 둥근 모서리를 비활성화하는 옵션이 없습니다. 코드를 디버그하고 결과 없이 웹을 검색하는 데 몇 시간을 보냅니다.

이것은 내가 그것을 해결할 때까지 지난 며칠 동안 있었던 실제 문제를 기반으로합니다 ...

scss 재정의

우선, 이 튜토리얼에서는 SCSS가 필요합니다.
'npm install -g sass'

설치 후 메인 SCSS 파일인 main.scss를 만듭니다.
그런 다음 @import를 사용하여 기본 파일에서 프레임워크의 CSS를 가져오고 싶습니다.

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

그런 다음 프레임워크에서 재정의할 클래스를 찾아야 합니다. 저는 모든 vuesax 카드에 경계 반경이 없도록 만들고 싶습니다. 약간의 연구 끝에 스타일은 .vs-card 클래스 아래에 있습니다.

가져오기 위에 클래스 이름을 작성하고 사용자 정의 CSS를 적용하십시오.

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

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

main.scss를 프로젝트로 가져오고 CSS가 프레임워크의 CSS를 재정의하는 것을 확인하십시오.

이것이 도움이 되기를 바랍니다. :)

어떤 단어들

이것은 내가 Dev.to에 쓴 첫 블로그 포스트이자 일반적으로 블로그 포스트입니다. 웹에서 CSS를 프레임워크에 적용하는 방법에 대한 정보를 거의 찾지 못했기 때문에 이 글을 작성하기로 결정했습니다.
해결책을 찾은 후 기쁨에 오전 1시에 이것을 썼습니다.