Bootstrap을 도입한 애플리케이션에서 CSS가 반응하지 않는 경우의 대책
이 기사의 목적
배경
Rails에서 Bootstrap을 사용하는 방법을 배웠지만 Bootstrap의 템플리가 아닌 부분에 CSS가 반응하지 않습니다.
아래가 코드와 브라우저에서의 외형.
(Bootstrap의 사용법을 시도하고 있기 때문에, 액션이나 파일의 의도는 특별히 없다.)
index.html.erb<%= render 'shared/header' %>
<p class="bg-primary"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
_header.html.erb<header id="header-wrapper"></header>
header.scss#header-wrapper {
height: 50vh;
background-color: blue;
}
application.scss@import "bootstrap";
@import "tweets.scss";
// tweet.scssは何も記述がない
@import "header.scss";
Google 크롬으로 표시↓
녹색, 파랑, 노랑, 빨간색 선은 Bootstrap의 템플리로, 맨 위의 두꺼운 빨간색 선은 스스로 준비한 헤더.
(위에 검은 선이 보이지만 Google 크롬 막대 부분)
1점 이상한 부분이 있다.
헤더 부분을, 背景色blue、高さ50vh 로 지정했는데, 背景色red、高さ5vh 가 되어 버리고 있다.
확실히, 처음은 背景色red、高さ5vh 로 설정했지만, 背景色blue、高さ50vh 로 변경할 수 있을까 시험했는데, 변하지 않게 되어 버렸다.
원인
SCSS 파일 로드 순서
위의 코드에서 설명한 것처럼 application.scss에서 Bootstrap을 가장 먼저 읽습니다.
Bootstrap에서는, 미리 클래스나 ID가 준비되어 있으므로, 경합한 것이 있는 경우, 그쪽이 우선되는 것 같다.
따라서 Bootstrap을로드하기 전에 직접 준비한 SCSS 파일을 먼저 읽어보십시오.
application.scss@import "tweets.scss";
// tweet.scssは何も記述がない
@import "header.scss";
@import "bootstrap";
이상과 같이 읽어들이는 순서를 수정해, Google chrome로 표시해 보면,,,↓
헤더 부분이 단단히 지정된 것처럼 표시되었습니다.
결론
읽어들이는 순서를 바꾸면, SCSS가 확실히 적용된다.
(Bootstrap에 대해서는 방금 배우기 시작했기 때문에, 원인은 그 밖에도 있을지도 모른다.)
<%= render 'shared/header' %>
<p class="bg-primary"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
<header id="header-wrapper"></header>
#header-wrapper {
height: 50vh;
background-color: blue;
}
@import "bootstrap";
@import "tweets.scss";
// tweet.scssは何も記述がない
@import "header.scss";
SCSS 파일 로드 순서
위의 코드에서 설명한 것처럼 application.scss에서 Bootstrap을 가장 먼저 읽습니다.
Bootstrap에서는, 미리 클래스나 ID가 준비되어 있으므로, 경합한 것이 있는 경우, 그쪽이 우선되는 것 같다.
따라서 Bootstrap을로드하기 전에 직접 준비한 SCSS 파일을 먼저 읽어보십시오.
application.scss
@import "tweets.scss";
// tweet.scssは何も記述がない
@import "header.scss";
@import "bootstrap";
이상과 같이 읽어들이는 순서를 수정해, Google chrome로 표시해 보면,,,↓
헤더 부분이 단단히 지정된 것처럼 표시되었습니다.
결론
읽어들이는 순서를 바꾸면, SCSS가 확실히 적용된다.
(Bootstrap에 대해서는 방금 배우기 시작했기 때문에, 원인은 그 밖에도 있을지도 모른다.)
Reference
이 문제에 관하여(Bootstrap을 도입한 애플리케이션에서 CSS가 반응하지 않는 경우의 대책), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nari3922/items/cd9d7e7b6401f95a30fd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
