SCSS 파일에서 부트 스트랩 유틸리티 클래스 확장

Question

내 scss 파일에서 부트 스트랩의 유틸리티 클래스 중 일부를 사용하려고합니다.

나는 많은 파일에 유틸리티 클래스를 확장 할 때 나는이 @import '~bootstrap/scss/bootstrap-grid.scss';

같은 부트 스트랩 수입하고

.pageTitle { @extend .p-3, border-bottom: 1px solid red} 

예를 들어, 내 번들 크기를 증가하는 다수의 bootstrap.scss을 포함해야 내가 webpack을 사용하여 묶으려고 할 때. 또한 빌드 시간도 크게 늘립니다.

bootstrap.scss을 한 번 포함하고 번들로 묶는 방법이 있습니까?

Answer 1

당신은 당신이 너무 라이브러리 파일을 포함보다 먼저 필요한 부트 스트랩 SCS들에게 파일을 가져 주 하는 SCS 파일을 가질 수 있습니다.

이제는이 "마스터"파일 project.scss을 호출 해 보겠습니다. 그래서, 당신의 project.scss 파일은 다음과 같이 볼 수 있었다 다음 _typography.scss 및 _my - 기타 - styles.scss 파일이 project.scss과 같은 디렉토리에있는

// Extended Bootstrap files 
@import '~bootstrap/scss/bootstrap-grid.scss'; 

// Projects styles 
@import "typography"; 
@import "my-other-styles"; 
// …etc… 

을 파일 이렇게하면 모든 파일이 가져온 부트 스트랩 파일에 정의 된 항목에 액세스 할 수 있습니다.

bootstrap.scss을 예로들 수 있습니다. 함수, 변수 및 믹스 인은 먼저 다른 scss 파일에 사용되므로 나중에 가져옵니다.