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 함수를 사용할 수 있게 되었다.
참고