react.js 시작하기 190813 - sass 사용해보기

css 할라고

 npm install node-sass
 npm install open-color
 npm install sass-loader
 npm install classname
 
 
 npm install node-sass open-color sass-loader classnames --save
 //군데군데 쓰임

 

index.css를 .scss로 바꾸기

 

~의 의미?

install을 시키면 lib가 node_module에 전부 들어간다.

open-color가 node에다가 자동으로 들어간다 

index.scss

@import '~open-color/open-color';

body {
  background: $oc-gray-1;
  margin: 0px;
}

main가서 h1태그 걸어라

 

a.scss파일 만들기

.Redbox{
    background : red;
    padding : 1rem;
}

.greenyellowbox{
    background : greenyellow;
    padding : 1rem;
}

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import './a.scss'
function App() {
  return (
    <div className="App">
      <h2>app.js</h2>
      <Bpp/>
    </div>
  );
}

function Bpp(props) {
  return (
    <div className={'Redbox'}>
      <h3>bpp</h3>
    </div>
  );
}

export default App;

className에 {}이렇게 하면 css와 scss와 호환이 됨

일케된다 마

 

근디 함더해보자 다른방법으로

import React from 'react';
import './index.scss';
import a from './a.scss'
import className from 'classnames/bind'
function App() {
  return (
    <div className="App">
      <h2>app.js</h2>
      <Bpp/>
      <Cpp/>
    </div>
  );
}
//import './a.scss' 얘랑 짝지
function Bpp(props) {
  return (
    <div className={'Redbox'}>
      <h3>bpp</h3>
    </div>
  );
}
//import a from './a.scss'
//import className from 'classnames/bind'
function Cpp(props) {
  const cx = className.bind(a)
  return (
    <div className={cx('greenyellowbox')}>
      <h3>cpp</h3>
    </div>
  );
}

export default App;

바인드방법을쓰셈 이꼴저꼴안봄ㅅㄱ

얄루!

 

 

css가져오깅

 

b.css

.bluebox {
    background: blue;
    color: white;
    font-size: 2rem;
}
.yellowbox {
    background: yellow;
    color: white;
    font-size: 2rem;
}

 

app.js

import React from 'react';
import './index.scss';
import a from './a.scss'
import './b.css'
import b from './b.css'
import className from 'classnames/bind'
function App() {
  return (
    <div>
      <h2>app.js</h2>
      <Bpp/>
      <Cpp/>
      <Dpp/>
      <Fpp/>
    </div>
  );
}
//import './a.scss' 얘랑 짝지
function Bpp(props) {
  return (
    <div className={'Redbox'}>
      <h3>bpp</h3>
    </div>
  );
}
//import a from './a.scss'
//import className from 'classnames/bind'
function Cpp(props) {
  const cx = className.bind(a)
  return (
    <div className={cx('greenyellowbox')}>
      <h3>cpp</h3>
    </div>
  );
}

function Dpp(props) {
  return (
    <div className={'bluebox'}>
     <h3>Dpp</h3>
    </div>
  );
}
function Fpp(props) {
  const cxx = className.bind(b)
  return (
    <div className={cxx('yellowbox')}>
      <h3>Fpp</h3>
    </div>
  );
}


export default App;