부트 스트랩하는 SCS

Question

내 의존성에

npm install bootstrap@4.0.0-alpha.6 --save 

를 사용하여 부트 스트랩 설치 한 내가 가진 :

"dependencies": { 
    "bootstrap": "^4.0.0-alpha.6", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1" 
    } 

내 styles.scss에

@import '~bootstrap/scss/bootstrap'; 

및 여기 내 webpack 파일이 있습니다 :

내 헤더 구성 요소

import React from 'react'; 

export class Header extends React.Component { 
    render() { 
     return(
      <header className="container">header here</header> 
     ); 
    } 
} 

export default Header; 

에 container 클래스를 추가 할 때

는하지만 다음과 같습니다

및 build.js에 내가 .container 클래스를 찾을 수 없습니다. .row뿐만 아니라 등

bootstrap.scss>>import grid 용기 내부의이 보인다 :이 변수가

$enable-grid-classes:  true !default; 

그래서 무슨 일이야 사실 부트 스트랩 내부

@if $enable-grid-classes { 
    .container { 
    @include make-container(); 
    @include make-container-max-widths(); 
    } 
} 

및 _variables.scss에서

?

Answer 1

구성 요소에 .scss 파일을 가져 와서 html로 적용해야합니다. 좋아요 :

import React from 'react'; 
import styles from './styles.scss'; // your .scss file 

export class Header extends React.Component { 
    render() { 
     return(
      <header className={styles.container}>header here</header> 
     ); 
    } 
} 

export default Header;