programing

Angular에서 SAS와 함께 부트스트랩 4를 사용하는 방법

lastmoon 2023. 8. 20. 12:29

Angular에서 SAS와 함께 부트스트랩 4를 사용하는 방법

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

특히 필요한 것은 다음과 같습니다.

글로벌 스타일 및 구성 요소 스타일로 CSS 대신 SAS 사용
사용자 정의 *.scss 스타일과 함께 부트스트랩 SAS 소스 컴파일
부트스트랩 소스 자체를 편집하지 않고 필요할 때 부트스트랩 소스를 재정의할 수 있도록 내 사용자 지정 스타일이 부트스트랩 소스를 재정의하는지 확인합니다(부트스트랩 소스 버전을 쉽게 업그레이드할 수 있음).
및 모두)이 *.(*.scss 될 때마다 watch & auto-ilile을 합니다.ng serve

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

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

새 각도 CLI를 사용하는 방법(버전 6 이상)

CSS 대신 SAS를 사용하도록 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

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

이 작업을 수행하려면 스타일 파일의 이름을 변경해야 합니다..css.scss그리고 변경합니다.@Component({ ... })그에 따른 구성:

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

가 각는방로식-cli다과와 같은 을 실행하는 될 때마다 으로 해당 합니다.ng serve.

부트스트랩 4 추가

npm을 통해 부트스트랩 4를 설치합니다.

npm install bootstrap --save

이제 부트스트랩을 에 추가합니다.angular-cli.json의 구성 내stylesarray CSS 부트스트랩 할 수 하기 :array ("array"라는 뜻의 "array"라는 뜻의 "array"라는 뜻의 "css/scss"라는 뜻의 "array"라는 뜻의 "array"라는 뜻의 "array"라는 뜻의 "array"라는 뜻의 "array"라는 뜻의 "css/scss"라는 뜻입니다.

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

이렇게 하면 부트스트랩 4 소스 코드가 깨끗하게 유지되고 새로운 버전이 출시될 때마다 업그레이드하는 것이 매우 쉬워집니다.

사용자 정의(글로벌) SAS 파일 추가

스타일과 추가 SAS 은 구단일소스달프다영에 추가할 수.app/assets/scss그리고 나서 에 언급되었습니다.styles의 angular-cli.json.

제 제안은 싱글을 참조하는 것입니다.main.scss 사용자 스타일을 . 를 들어, "" "SAS" "SAS"_variables.scss변수의 a 자용정 변의경우수의사, a_global.scss당신의 글로벌 규칙을 위한 파일 등.

그래서 당신의angular-cli.json하나의 사용자 정의만 참조합니다.main.scss파일 이름:

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

내부적으로 모든 사용자 정의 글로벌* SAS 코드가 포함되어 있습니다.

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

*여기에 다음을 포함해서는 안 됩니다.*.scss단일 구성요소의 스타일 파일입니다.

부트스트랩 JavaScript 및 jQuery의 대체 기능을 포함합니다.

jQuery 없이 부트스트랩을 사용할 수 있는 프로젝트가 있습니다.

두 가지 예:

이 두 프로젝트의 차이점은 다음과 같습니다."ng-bootstrap"과 "ngx-bootstrap"의 차이점은 무엇입니까?

이전 각도 CLI를 사용한 지침

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

CSS 대신 SAS를 사용하도록 Angular CLI 구성

실행:

ng set defaults.styleExt scss

이것은 당신에게 영향을 미칠 것입니다..angular-cli.json구성 파일(예).

다음을 사용하여 새 수 .ng new my-project --style=scss이는 정상적으로 새 프로젝트를 만든 다음 위에서 언급한 명령을 실행하는 것과 같습니다.

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

이 작업을 수행하려면 스타일 파일의 이름을 변경해야 합니다..css.scss그리고 변경합니다.@Component({ ... })그에 따른 구성:

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

(예).

가 각는방로식-cli다과와 같은 을 실행하는 될 때마다 으로 해당 합니다.ng serve.

부트스트랩 4 추가

npm을 통해 부트스트랩 4를 설치합니다.

npm install bootstrap --save

이제 부트스트랩을 에 추가합니다..angular-cli.json의 구성 내stylesarray CSS 부트스트랩 할 수 하기 :array ("array"라는 뜻의 "array"라는 뜻의 "array"라는 뜻의 "css/scss"라는 뜻의 "array"라는 뜻의 "array"라는 뜻의 "array"라는 뜻의 "array"라는 뜻의 "array"라는 뜻의 "css/scss"라는 뜻입니다.

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

(예).

이렇게 하면 부트스트랩 4 소스 코드가 깨끗하게 유지되고 새로운 버전이 출시될 때마다 업그레이드하는 것이 매우 쉬워집니다.

사용자 정의(글로벌) SAS 파일 추가

단일 구성요소 스타일과 달리 프로젝트에 전체적으로 영향을 미치는 추가 SAS 스타일은 다음에 추가할 수 있습니다.app/assets/scss그리고 나서 에 언급되었습니다.styles많은.angular-cli.json.

제 제안은 싱글을 참조하는 것입니다.main.scss모든 사용자 지정 SAS 스타일을 포함하는 파일: 예:_variables.scss사용자 정의 변수의 경우, a_global.scss당신의 글로벌 규칙을 위한 파일 등.(예).

그래서 당신의.angular-cli.json하나의 사용자 정의만 참조합니다.main.scss파일 이름:

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

내부적으로 모든 사용자 정의 글로벌* SAS 코드가 포함되어 있습니다.

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

*여기에 다음을 포함해서는 안 됩니다.*.scss단일 구성요소의 스타일 파일입니다.

부트스트랩 JavaScript 및 jQuery의 대체 기능을 포함합니다.

jQuery 없이 부트스트랩을 사용할 수 있는 프로젝트가 있습니다.

두 가지 예:

이 두 프로젝트의 차이점은 다음과 같습니다."ng-bootstrap"과 "ngx-bootstrap"의 차이점은 무엇입니까?

@ShinDarth의 답변 외에도, 부트스트랩 모듈을 모두 가져오는 대신 필요한 부트스트랩 모듈만 가져오는 더 최소한의 솔루션을 원할 수도 있습니다.

따라서 다음을 대체할 수 있습니다.

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

포함:

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

당신의 그럼당신의.main.scss다음과 같이 표시됩니다.

// 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";

버전 6부터는 다음과 같아야 합니다.

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

만약 당신이 나를 위한 사용자 정의 테마가 있다면,

styles.scss에 lib만 추가합니다.

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

성공적으로 구축할 수 있었던 다른 방법은 다음과 같습니다.

1 - 부트스트랩 설치

npm install bootstrap

이렇게 하면 boostrap scss 파일이 node_modules 아래에 추가됩니다.(2단계 - 6단계는 https://code.visualstudio.com/docs/languages/css) 에서 제공됩니다.

2 - 노드-ass 설치

nmp install -g node-sass

이것은 sass를 css로 transfile해야 합니다.

3 - scss 및 생성된 css 파일을 보관하기에 적합한 폴더를 만듭니다. 예를 들어,

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

4 - 다음 내용을 포함하는 custom.scss 파일을 만듭니다.

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

5 - Ctrl+Shift+B로 VSCode에서 작업 만들기 > 작업 구성 > 템플릿에서 작업.json 파일 만들기 > 기타

tasks.json 파일이 .sysode 아래에 기본 콘텐츠로 생성됩니다.내용을 다음으로 대체

// 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"
    ]
  }]
}

참고: 필요에 따라 파일 이름과 경로를 수정합니다.

6 - 태스크를 실행하여 CSS를 생성합니다: Ctrl+Shift+B > 'Sass compile' 또는

7 - 부트스트랩 주제 지정 절차의 단계를 따릅니다. (https://getbootstrap.com/docs/4.1/getting-started/theming/)

Angular-cli를 사용하여 부트스트랩 4를 실행할 때 내가 겪었던 Javascript 의존성 문제에 다른 사람이 부딪힐 경우, 당신은 또한 당신이 랩 4에 필요한 다른 의존성을 설치했다는 것을 Angular-cli 컴파일러에게 알려야 합니다.

jquery, popper.js 및 bootstrap.js

이를 위해 .angular-cli.json 구성 파일의 스크립트 배열을 다음과 같이 수정해야 합니다.

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

npm install --save jquery popper.js를 사용하여 jquery와 popper를 설치한 것으로 짐작되므로 node_modules 폴더에서 패키지를 사용할 수 있습니다.

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

'programing' 카테고리의 다른 글

C 언어에서 #line의 의미는 무엇입니까? (0)	2023.08.25
socket.io 서버의 Node.js 클라이언트 (0)	2023.08.25
jQuery를 사용하여 iPad 사용자 탐지? (0)	2023.08.20
Zend Framework 2: Ajax 호출에 대한 레이아웃 자동 비활성화 (0)	2023.08.20
mysql 쿼리 최적화 및 필드 값 조작 (0)	2023.08.20

현재글Angular에서 SAS와 함께 부트스트랩 4를 사용하는 방법

각종 프로그래밍 정보를 다루는 블로그입니다.

git, ajax, mongodb, Excel, ReactJS, WordPress, jquery, spring, Oracle, sql-server, PowerShell, Python, MariaDB, Android, json, spring-boot, angularjs, asp.net, CSS, C,

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

lastmoon

Angular에서 SAS와 함께 부트스트랩 4를 사용하는 방법

Angular에서 SAS와 함께 부트스트랩 4를 사용하는 방법

새 각도 CLI를 사용하는 방법(버전 6 이상)

CSS 대신 SAS를 사용하도록 Angular CLI 구성

기존 프로젝트의 경우:

새 프로젝트를 생성할 때

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

부트스트랩 4 추가

사용자 정의(글로벌) SAS 파일 추가

부트스트랩 JavaScript 및 jQuery의 대체 기능을 포함합니다.

이전 각도 CLI를 사용한 지침

CSS 대신 SAS를 사용하도록 Angular CLI 구성

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

부트스트랩 4 추가

사용자 정의(글로벌) SAS 파일 추가

부트스트랩 JavaScript 및 jQuery의 대체 기능을 포함합니다.

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

Angular에서 SAS와 함께 부트스트랩 4를 사용하는 방법

Angular에서 SAS와 함께 부트스트랩 4를 사용하는 방법

새 각도 CLI를 사용하는 방법(버전 6 이상)

CSS 대신 SAS를 사용하도록 Angular CLI 구성

기존 프로젝트의 경우:

새 프로젝트를 생성할 때

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

부트스트랩 4 추가

사용자 정의(글로벌) SAS 파일 추가

부트스트랩 JavaScript 및 jQuery의 대체 기능을 포함합니다.

이전 각도 CLI를 사용한 지침

CSS 대신 SAS를 사용하도록 Angular CLI 구성

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

부트스트랩 4 추가

사용자 정의(글로벌) SAS 파일 추가

부트스트랩 JavaScript 및 jQuery의 대체 기능을 포함합니다.

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바