빌드 도구

툴링 설정

부트스트랩은 빌드 시스템에 npm 스크립트 를 사용합니다. package.json 에는 코드 컴파일, 테스트 실행 등을 포함하여 프레임워크 작업을 위한 편리한 방법이 포함되어 있습니다.

빌드 시스템을 사용하고 문서를 로컬에서 실행하려면 부트스트랩의 소스 파일과 Node.js의 사본이 필요합니다. 다음 단계를 수행하면 흔들 준비가 된 것입니다.

1. 종속성을 관리하는 데 사용하는 Node.js를 다운로드하여 설치 합니다.
2. Bootstrap의 소스를 다운로드 하거나 Bootstrap의 저장소 를 포크 하십시오.
3. 루트 /bootstrap디렉토리 로 이동하고 package.jsonnpm install 에 나열된 로컬 종속성을 설치하기 위해 실행합니다 .

완료되면 명령줄에서 제공되는 다양한 명령을 실행할 수 있습니다.

npm 스크립트 사용

package.json 에는 프로젝트 개발을 위한 수많은 작업이 포함되어 있습니다 . npm run터미널에서 모든 npm 스크립트를 보려면 실행 하십시오. 기본 작업은 다음과 같습니다.

일	설명
npm start	CSS 및 JavaScript를 컴파일하고 문서를 빌드하고 로컬 서버를 시작합니다.
npm run dist	dist/컴파일된 파일 이 있는 디렉터리를 만듭니다 . Sass , Autoprefixer 및 terser 가 필요합니다 .
npm test	실행 후 로컬에서 테스트 실행npm run dist
npm run docs-serve	문서를 로컬에서 빌드하고 실행합니다.

사스

Bootstrap은 Sass 소스 파일을 CSS 파일로 컴파일하기 위해 Dart Sass 를 사용하며(빌드 프로세스에 포함됨) 자체 자산 파이프라인을 사용하여 Sass를 컴파일하는 경우에도 동일한 작업을 수행하는 것이 좋습니다. 이전에 Bootstrap v4용으로 Node Sass를 사용했지만 LibSass 및 Node Sass를 포함하여 이 위에 빌드된 패키지는 더 이상 사용되지 않습니다 .

Dart Sass는 10의 반올림 정밀도를 사용하며 효율성을 위해 이 값의 조정을 허용하지 않습니다. 축소와 같이 생성된 CSS를 추가로 처리하는 동안에는 이 정밀도를 낮추지 않지만 그렇게 하도록 선택한 경우 브라우저 반올림 문제를 방지하기 위해 정밀도를 6 이상으로 유지하는 것이 좋습니다.

자동 접두사

Bootstrap은 Autoprefixer (빌드 프로세스에 포함)를 사용하여 빌드 시 일부 CSS 속성에 공급업체 접두사를 자동으로 추가합니다. 그렇게 하면 v3에서 볼 수 있는 것과 같은 공급업체 믹스인이 필요하지 않고 CSS의 핵심 부분을 한 번에 작성할 수 있으므로 시간과 코드가 절약됩니다.

Autoprefixer를 통해 지원되는 브라우저 목록을 GitHub 리포지토리 내의 별도 파일에 유지 관리합니다. 자세한 내용은 .browserslistrc 를 참조하세요.

RTLCSS

부트스트랩은 RTLCSS 를 사용하여 컴파일된 CSS를 처리하고 RTL로 변환합니다. 기본적으로 수평 방향 인식 속성(예: padding-left)을 반대 속성으로 대체합니다. CSS를 한 번만 작성하고 RTLCSS 제어 및 값 지시문을 사용하여 약간만 조정할 수 있습니다.

현지 문서

문서를 로컬에서 실행하려면 Hugo -bin npm 패키지 를 통해 설치되는 Hugo를 사용해야 합니다. Hugo는 기본 포함, Markdown 기반 파일, 템플릿 등을 제공하는 매우 빠르고 확장 가능한 정적 사이트 생성기입니다. 시작하는 방법은 다음과 같습니다.

1. 위의 도구 설정 을 실행하여 모든 종속성을 설치합니다.
2. 루트 /bootstrap디렉터리 npm run docs-serve에서 명령줄에서 실행합니다.
3. http://localhost:9001/브라우저에서 열고 짜잔.

설명서 를 읽고 Hugo 사용에 대해 자세히 알아보세요 .

문제 해결

종속성 설치에 문제가 발생하면 모든 이전 종속성 버전(글로벌 및 로컬)을 제거하십시오. 그런 다음 을 다시 실행 npm install하십시오.