Angular에서 SASS와 함께 Bootstrap 4를 사용하는 방법

Angular에서 SASS와 함께 Bootstrap 4를 사용하는 방법

---

Angular CLI로 만든 Angular (4+) 프로젝트에서 SASS와 함께 Bootstrap 4를 사용하고 싶습니다.

특히 다음을 수행해야합니다.

• CSS 대신 SASS를 전역 스타일과 구성 요소 스타일로 사용
• 내 사용자 정의 * .scss 스타일과 함께 Bootstrap SASS 소스를 컴파일하십시오.
• 내 사용자 정의 스타일이 Bootstrap 소스를 재정 의하여 필요한 경우 Bootstrap 소스 자체를 편집하지 않고도 Bootstrap 소스를 재정의 할 수 있는지 확인합니다 (Bootstrap 소스 버전을 쉽게 업그레이드 할 수 있음).
• ng serve스크립트에 * .scss 파일이 변경 될 때마다 (구성 요소 및 전역 스타일 모두) 감시 및 자동 재 컴파일 추가

---

SASS를 사용하여 Angular + Bootstrap 4를 설정하려면 Angular CLI를 구성하고 Bootstrap 4 npm 패키지를 설치하기 만하면됩니다. SASS 컴파일러가 이미 포함되어 있으므로 설치할 필요가 없습니다.

편집 :이 답변은 최신 버전 Angular CLI (버전 6.1.3에서 테스트 됨)에서 작동하도록 업데이트되었습니다. 이 답변의 하단에 이전 Angular CLI에 대한 지침을 남겼지 만 Angular CLI 버전 을 업데이트 하는 것이 좋습니다 .

---

새 ANGULAR CLI (버전 6 이상)를 사용하는 지침

1) CSS 대신 SASS를 사용하도록 Angular CLI 구성

-기존 프로젝트 :

angular.json파일을 편집 하고 "styleext": "scss"키 값을 projects.PROJECT_NAME.schematics.@schematics/angular:component개체에 추가 합니다.

다음과 같이 표시되어야합니다.

{
  // ...
  "projects": {
    "PROJECT_NAME": {
      // ....
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
  // ...
}

-새 프로젝트 생성시

간단히 사용 :

ng new my-project --style=scss

2) 기존 구성 요소 스타일을 CSS에서 SASS (있는 경우)로 변경

이를 위해 스타일 파일의 이름을에서 .css로 .scss변경하고 @Component({ ... })그에 따라 구성을 변경하면 됩니다.

styleUrls: ['./my-component.scss']

이런 식으로 angular-cli는 같은 명령을 실행하는 동안 이러한 파일이 변경 될 때마다 자동으로 감시하고 다시 컴파일합니다 ng serve.

3) 부트 스트랩 4 추가

npm을 통해 Bootstrap 4를 설치합니다.

npm install bootstrap --save

이제 부트 스트랩 규칙을 재정의 할 수 있도록 배열 angular-cli.json내부 의 구성 에 부트 스트랩을 추가 styles합니다 (다른 사용자 정의 css / scss 파일 앞에 추가) .

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

이렇게하면 Bootstrap 4 소스 코드가 깨끗하게 유지되고 새 버전이 출시 될 때마다 업그레이드하기가 매우 쉽습니다.

4) 사용자 지정 (글로벌) SASS 파일 추가

단일 구성 요소 스타일과 달리 프로젝트에 전체적으로 영향을 미치는 추가 SASS 스타일은 .NET Framework app/assets/scss의 styles배열 아래에 추가 한 다음 참조 할 수 있습니다 angular-cli.json.

내 제안은 main.scss모든 사용자 지정 SASS 스타일을 포함 할 단일 파일 을 참조하는 것입니다. 예를 들어 _variables.scss사용자 지정 변수에 대한 _global.scss파일, 전역 규칙에 대한 파일 등.

따라서 angular-cli.json하나의 사용자 정의 main.scss파일 만 참조 합니다.

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "src/assets/scss/main.scss"
],

모든 사용자 정의 글로벌 * SASS 코드를 내부적으로 포함합니다.

// main.scss 
@import "variables";
@import "global";
// import more custom files...

* 여기 에 단일 컴포넌트 의 스타일 파일을 포함 해서는 안됩니다*.scss .

5) Bootstrap JavaScript 및 jQuery를 대체하십시오.

jQuery없이 Bootstrap을 사용할 수있는 몇 가지 프로젝트가 있습니다 .

두 가지 예 :

• ngx- 부트 스트랩

• ng 부트 스트랩

이 두 프로젝트의 차이점은 여기에서 설명합니다. "ng-bootstrap"과 "ngx-bootstrap"의 차이점은 무엇입니까?

---

이전 ANGULAR CLI 사용 지침

경고 : 나는 더 이상 답변의이 부분을 유지하지 않을 것이므로 계속 읽으 려면 Angular CLI 버전 을 업데이트 하고 위의 지침을 따르는 것이 좋습니다 .

1) CSS 대신 SASS를 사용하도록 Angular CLI 구성

운영:

ng set defaults.styleExt scss

이는 .angular-cli.json구성 파일에 영향을 미칩니다 ( 예 ).

참고 : 처음부터 시작하는 경우 다음을 사용하여 Angular CLI를 사용하여 새 프로젝트를 만들 수 있습니다. ng new my-project --style=scss이는 일반적으로 새 프로젝트를 만든 다음 위에서 언급 한 명령을 실행하는 것과 같습니다.

2) 기존 구성 요소 스타일을 CSS에서 SASS (있는 경우)로 변경

이를 위해 스타일 파일의 이름을에서 .css로 .scss변경하고 @Component({ ... })그에 따라 구성을 변경하면 됩니다.

styleUrls: ['./my-component.scss']

( 예 ).

이런 식으로 angular-cli는 같은 명령을 실행하는 동안 이러한 파일이 변경 될 때마다 자동으로 감시하고 다시 컴파일합니다 ng serve.

3) 부트 스트랩 4 추가

npm을 통해 Bootstrap 4를 설치합니다.

npm install bootstrap --save

이제 부트 스트랩 규칙을 재정의 할 수 있도록 배열 .angular-cli.json내부 의 구성 에 부트 스트랩을 추가 styles합니다 (다른 사용자 정의 css / scss 파일 앞에 추가) .

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

( 예 ).

이렇게하면 Bootstrap 4 소스 코드가 깨끗하게 유지되고 새 버전이 출시 될 때마다 업그레이드하기가 매우 쉽습니다.

4) 사용자 지정 (글로벌) SASS 파일 추가

단일 구성 요소 스타일과 달리 프로젝트에 전체적으로 영향을 미치는 추가 SASS 스타일은 .NET Framework app/assets/scss의 styles배열 아래에 추가 한 다음 참조 할 수 있습니다 .angular-cli.json.

내 제안은 main.scss모든 사용자 지정 SASS 스타일을 포함 할 단일 파일 을 참조하는 것입니다. 예를 들어 _variables.scss사용자 지정 변수에 대한 _global.scss파일, 전역 규칙에 대한 파일 등 ( 예 ).

따라서 .angular-cli.json하나의 사용자 정의 main.scss파일 만 참조 합니다.

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "assets/scss/main.scss"
],

모든 사용자 정의 글로벌 * SASS 코드를 내부적으로 포함합니다.

// main.scss 
@import "variables";
@import "global";
// import more custom files...

* 여기 에 단일 컴포넌트 의 스타일 파일을 포함 해서는 안됩니다*.scss .

5) Bootstrap JavaScript 및 jQuery를 대체하십시오.

There are some projects that allow you to use Bootstrap without jQuery.

Two examples:

• ngx-bootstrap

• ng-bootstrap

The difference between those two project is discussed here: What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

---

In addition to @ShinDarth's answer, you may want to go for a more minimal solution, importing only the Bootstrap modules you need instead of them all.

So you would replace:

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "assets/scss/main.scss"
],

With:

"styles": [
  "assets/scss/main.scss"
],

Then your main.scss would look like:

// import only the Bootstrap modules you need, e.g.
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/forms";
// import your own custom files, e.g.
@import "variables";
@import "global";

---

From version 6 should be

"styles": [
   "node_modules/bootstrap/scss/bootstrap.scss",
   "src/styles.scss",
   "src/assets/scss/main.scss"
]

If you have a custom theme for me works

only adding the lib in the styles.scss

@import "./assets/scss/mytheme";
@import "~bootstrap/scss/bootstrap";

---

Here is an alternative way I managed to build successfully

1 - Install bootstrap

npm install bootstrap 

This should add boostrap scss file under node_modules. (Step 2 - 6 is from https://code.visualstudio.com/docs/languages/css)

2 - Install node-sass

nmp install -g node-sass

This is need to transpile sass to css

3 - Create a folder whereever is suitable for you to keep scss and generated css files. e.g.

your-project/
├── scss
│   └── custom.scss   
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

4 - Create a custom.scss file with following content:

@import "../node_modules/bootstrap/scss/bootstrap";

5 - Create a task in VSCode by Ctrl+Shift+B > Configure Tasks > Create tasks.json file from template > Others

tasks.json file under .vscode is created with default content. Replace the content with

// Sass configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [{
    "label": "Sass Compile",
    "type": "shell",
    "command": "node-sass scss/custom.scss scss/custom-bootstrap.css",
    "group": "build",
    "problemMatcher": [
      "$eslint-stylish"
    ]
  }]
}

Note: Modify the file names and paths according to your needs.

6 - Run the task to generate css: Ctrl+Shift+B > 'Sass compile' or

7 - Follow the steps in bootstrap theming procedure: (https://getbootstrap.com/docs/4.1/getting-started/theming/)

---

In case someone else run into the Javascript dependencies issue that I had when running Bootstrap 4 using angular-cli, you also need to let the angular-cli compiler know that you have installed the other dependencies that boostrap 4 needs:

jquery, popper.js and bootstrap.js

For that you need to modify the scripts array on the .angular-cli.json configuration file to something like this:

"scripts": [
    "../node_modules/jquery/dist/jquery.slim.js", 
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"]

I am guessing that you have installed jquery and popper using npm install --save jquery popper.js so those packages are available on the node_modules folder.

ReferenceURL : https://stackoverflow.com/questions/45660802/how-to-use-bootstrap-4-with-sass-in-angular