상현
개발 덕후

단일 @mixin에서 bootstrap 함수사용 (feat: node-module)

( 업데이트: )

TL;DR


@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';Code language: CSS (css)

해당 파일만가져오면 @include media-breakpoint-up(sm) 정상적으로 사용가능

🤔 문제발생

accordion.scss라는 파일에서 @include media-breakpoint-up(sm)을 사용할 수 없다.

무엇이 문제일까?

합리적인 의심인 bootstrap 코드를 임포트하지 않아서 생기는 문제같았다.

Try1

그럼 main.scss의 최상위에서 bootstrap.scss에서 설정한 것처럼

@import '~bootstrap/scss/bootstrap';Code language: CSS (css)

이렇게 적용했다.

역시 생각대로 bootstrap의 함수를 사용할 수 있게되었다.

하지만 또다른 문제가 생겼다.

Try1 – 다른 문제 발생

accordion.scss에서 bootstrap 스타일 코드를 불러오니까 bootstrap 스타일이 2개로 중복되는 것이다.

그래서 여기서만 사용하는 bootstrap 함수만 가져와서 사용해야겠다고 생각했다.

Try2

node-module안에 bootstrap/scss 부분의 스타일 파일들을 살펴보았다.

내가 사용하는 함수는 대략적으로 bootstrap/scss/mixin/breakpoint에서 불러오면 사용할수 있다. 그러면 해당 scss만 임포트! 종속적으로 가져와야할 파일들도있다

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';Code language: CSS (css)

위 세가지 파일들을 가져와서 bootstrap 함수를 사용할 수 있게 되었다.


참고