Back Ground

React - 스타일링(SCSS) 본문

Javascript/React.js

React - 스타일링(SCSS)

Back 2018. 11. 2. 00:57



스타일링 

즉 CSS 부분이다. 


create-react-app을 통해서 프로젝트를 생성했으면 알겠지만

기본적으로 css파일을 사용하여 컴포넌트에 import하여 사용할 수있는데


이것은 webpack의 css-loader를 이용하여 일반 CSS를 불러오는 방식이였다.


CSS를 작성하다보면 클래스네임이 중복될 가능성이 있는데,

이를 방지하려고 앞 코드에서는 각 클레스네임에 컴포넌트 이름을 접두사로 붙여주었다. 

(예 App-header, App-intro 등)



접두사를 붙이는 방법말고 다음 방식으로도 해결 할 수 있다.

1
2
3
4
.App {...} 
.App .header{...} 
.App .logo{...} 
.App .intro{...} 
cs


Sass를 사용한다면 이런식으로 작성할 수 있다.

1
2
3
4
5
.App {
    .header{...} 
    .logo{...} 
    .intro{...} 
}
cs





스타일링을 할때 자주 사용하는 방법


CSS Module 

모둘화 된 CSS로 CSS 클래스를 만들면 자동으로 고유한 클레스네임을 생성하여

스코프를 지역적으로 제한하는 방식


Sass

자주 사용하는 CSS 전처리기 중 하나이며, 확장된 CSS문법을 사용하여 

CSS코드를 더욱 쉽게 작성하는 방식


styled-components

요즘 인기있는 컴포넌트 스타일링 방식으로,

JS코드 내부에서 스타일을 정의






그리고  create-react-app을 통해서 프로젝트를 생성했을때

React 프로젝트의 환경설정을 보는것과 수정을 하기위해 


package.json의 해당 디렉토리에 npm eject( yarn eject ) 명령어를 실행하면

node_modules/react-scripts 경로에 내장된 리액트 프로젝트의 환경설정 파일을

프로젝트 루트 경로로 이동한다.  ( MAC 기준 같다. )





CSS Module


CSS를 모듈화하여 사용하는 방식이다.

CSS클래스를 만들면 자동으로 고유한 클래스네임을 생성하여 스코프를 지역적으로 제한한다.

모듈화된 CSS를 webpack으로 불러오면 다음과 같이 

사용자가 정의한 클래스네음과 고유화된 클래스 네임으로 구성된 객체를 반환한다.


1
2
3
{
    box : 'src-App__box--mjrNr'
}
cs


그리고 클래스를 적용할 때는 className = {styles.box} 방식으로 사용한다.




CSS Module 활성화

우선 webpack 설정으로 들어가서 CSS Module을 활성화 해보자

create-react-app으로 css-loader는 이미 적용되어 있으니

 로더의 옵션만 조금 수정하면 된다.


 node_modules/react-scripts 경로에 내장된 config/webpack.config.dev.js 파일을 열어 css-loader를 찾아보면 


webpack.config.dev.js

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
// @remove-on-eject-begin
/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
// @remove-on-eject-end
'use strict';
 
const fs = require('fs');
const path = require('path');
const resolve = require('resolve');
const webpack = require('webpack');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const ManifestPlugin = require('webpack-manifest-plugin');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
// @remove-on-eject-begin
const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
// @remove-on-eject-end
 
// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const publicPath = '/';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
const publicUrl = '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
 
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
 
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
 
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    },
    {
      // Options for PostCSS as we reference these options twice
      // Adds vendor prefixing based on your specified browser support in
      // package.json
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebook/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
          }),
        ],
      },
    },
  ];
  if (preProcessor) {
    loaders.push(require.resolve(preProcessor));
  }
  return loaders;
};
 
 
 
// (......) 생략 
 
 
cs




여기에 보면

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
31
32
33
34
35
36
37
38
39
40
41
42
43
 
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
 
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    },
    {
      // Options for PostCSS as we reference these options twice
      // Adds vendor prefixing based on your specified browser support in
      // package.json
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebook/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
          }),
        ],
      },
    },
  ];
  if (preProcessor) {
    loaders.push(require.resolve(preProcessor));
  }
  return loaders;
};
 
 
cs

이 부분이 있는데 ( webpack 버젼이 달라서 책이랑 코드가 다를 것이다. )


CSS를 불러오는 과정에서 총 3가지 로더를 사용 했는데

style-loader 

 스타일을 불러와 웹페이지에서 활성화 하는 역할

css-loader 

 css파일에서 inport와 url(...) 문을 webpack의 require 기능으로 처리하는 역할

postcss_loader

 모든 웹 브라우저에서 입력한 CSS구문이 제대로 작동할 수 있도록 자동 -webkit, -mos, -ms등 접두사를 붙여준다


여기서 css-loader의 options에서 CSS Module을 사용하도록 설정하면 된다.

1
2
3
4
5
6
7
8
const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    },
    {
cs


책에는 

1
2
3
4
5
6
7
8
9
10
11
12
const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
        modules: true,
        localIdentName: '[path][name]__[local]--[hash:base64:5]'
      },
    },
    {
cs

저 bold처리 된 부분만 추가 하라고 써있지만.



현재 버젼 webpack에서 css-loader의 options는 cssOptions이라는 매개변수로 

받아오고 있고 consol.log를 찍어보면 안에 값이 이렇게 되어져있는 것을 확인할 수 있다.

1
2
3
4
5
6
7
8
{ importLoaders: 1 }
{ importLoaders: 1,
  modules: true,
  getLocalIdent: [Function: getLocalIdent] }
{ importLoaders: 2 }
{ importLoaders: 2,
  modules: true,
  getLocalIdent: [Function: getLocalIdent] }
cs


그래서 

1
2
3
4
5
6
7
8
9
10
11
12
const loaders = [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options:{
        cssOptions,
        importLoaders: 1,
        modules: true,
        localIdentName: '[path][name]__[local]--[hash:base64:5]'
      },
        
    },
cs

이런식으로 추가해 주었다.


- modules :

CSS Module을 활성화 시켜준다.


- localIdentName :

CSS Module에서 고유하게 생성되는 클레스네임 형식을 결정한다.

참고 : https://github.com/webpack-contrib/css-loader



[추가 설명]

 [path][name]__[local]--[hash:base64:5] 

 권장하는 방식이다 


하지만 저 토큰의 종류는 많다.

  • [ext] 자원의 확장
  • [name] 자원의 base name
  • [path]context쿼리 매개 변수 또는 옵션 과 관련된 리소스의 경로
  • [folder] 프로젝트의 폴더
  • [emoji] 임의의 이모티콘(특수문자) 표현 options.content
  • [emoji:<length>] 위와 동일하지만 사용자 지정으로 가능한 길이 
  • [hash]options.content(Buffer) (기본적으로 md5 해시의 16진수 가능)
  • [<hashType>:hash:<digestType>:<length>]하나 선택 한다
    • hashTypes, i. e. sha1, md5, sha256, sha512
    • digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64
    • length문자의 길이
  • [N] 현재 파일 이름과 일치하는 n 번째 options.regExp


솔직히 번역기를 돌렸다. 더 궁금하다면  https://github.com/webpack/loader-utils#interpolatename

이곳에 들어가서 확인 해보면 될 것 같다.


지금은 스타일을 설정하려고 webpack.config.dev.js 파일만 수정했는데

이 환경설정은 개발할때 가동하는 webpack 개발 서버 전용이라 

나중에 리액트 프로젝트를 완성하고 배포할 때는 webpack.config.prod.js 파일도 변경해야 한다.





CSS Module사용


App.css

1
2
3
4
5
6
7
8
9
.box{
  width:100px;
  height: 100px;
  border: 1px solid black;
}
.blue{
  background-color: blue;
}
cs


App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react';
import style from './App.css';
 
class App extends Component {
  render() {
    return (
      <div className={style.box}>
      </div>
    );
  }
}
 
export default App;
 
cs


 이렇게 하면 View에서 개발자 도구를 보면 이렇게 되어 있다.

1
<div class="src-App__box--1qndh"></div>
cs





클래스가 여러개 일때


App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Component } from 'react';
import style from './App.css';
 
class App extends Component {
  render() {
    return (
      <div className={[style.box,style.blue].join(' ')}>
      </div>
    );
  }
}
 
export default App;
cs

이렇게 하면 되지만 







이보다 더 쉬운 방법이 있다.

classnames 라이브러리를 사용하면 된다.


> npm install classnames --save ( yarn add classnames )


이 라이브러리를 설치하고 나면 다음과 같이 클래스를 여러개 적용이 가능하다.




App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { Component } from 'react';
import style from './App.css';
 
class App extends Component {
  render() {
    return (
      <div className={classNames(style.box,style.blue)}>
      </div>
    );
  }
}
 
export default App;
cs

이렇게 되면 "box blue" 로 사이공백 구분으로 넣어진다.



classNames의 bind 기능을 사용하면 좀 더 편하다

클래스네임을 입력할 때 style.를 생략할 수 있다. 


App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { Component } from 'react';
import classNames from 'classnames/bind';
import style from './App.css';
 
const cx = classNames.bind(styles);
 
class App extends Component {
  render() {
    return (
      <div className={cx('box','blue')}>
      </div>
    );
  }
}
 
export default App;
cs




classNames가 정말 편한 이유는 여러가지 형식으로 사용할 수 있기 때문이다.

이를 객체 형식이나 배열 형식 또는 혼용해서 전달 할 수도 있다. 


classNames 사용예제



1
2
3
4
5
6
7
8
9
10
11
12
13
classNames('foo' ,'bar'); //'foo bar'
classNames('foo' ,{ bar: true} ); //'foo bar'
classNames({'foo-bar' : true}); //'foo-bar'
classNames({'foo-bar' : false}); //''
classNames({foo : true },{bar : true }); //'foo bar'
classNames({foo : true , bar : true }); //'foo bar'
classNames(['foo','bar']); //'foo bar'
 
//형식을 동시에 여러개 받아 올 수도 있다.
classNames('foo' ,{bar : true , duck : false }, 'baz',{quux:true}); //'foo bar baz quux'
 
//false, null, 0, undefined는 무시한다.
classNames(null , false, 'bar',undefined, 0, 1, {baz: null},''); //'bar 1'
cs

( 웹표준 - class는 첫 글자가 숫자여선 안된다 )




이런식으로 응용해서 props로 받아와 사용하면 props에 따라 동적으로 줄수 있게된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from 'react';
import classNames from 'classnames/bind';
import style from './App.css';
 
const cx = classNames.bind(styles);
 
class App extends Component {
  render() {
    const isBlue = 'true'; 
       return (
      <div className={cx('box',{blue: isBlue})}>
      </div>
    );
  }
}
 
export default App;
cs




CSS Module은 고유한 클레스네임을 만들어 스코프를 제한한다.

classnames라이브러리를 사용하면 이를 더욱 편하게 지정 할수있다


하지만 이 방식에 단점이 있는데 

프로젝트를 진행하다 보면 코드가 복잡해져 가독성이 떨어질수 있다.

이런 CSS겸함은 Sass, LESS, Stylus등 CSS 전처리기 도구를 사용하여 해결 할수있다.







Sass

Sass(Syntactically awesome style sheets)의 약어로 '문법적으로 매우 멋진 스타일 시트'를 의미한다.

CSS에서 사용할 수 있는 문법을 확장하여 중복되는 코드를 줄여 작성할 수 있다.


Sass 참고 교육 자료

https://sass-guidelin.es/ko/





Sass 적용

Sass를 사용 하려면 두가지 패키지( node-sass, sass-loader )를 설치해야 한다.


>npm install node_sass sass-loader ( yarn add node-sass sass-loader )


sass-loader는 webpack에서 Sass파일을 읽어오고 

node-sass는 Sass로 작성된 코드들을 CSS로 변환한다.


sass-loader를 적용하려면, 

webpack 환경설정에서 css-loader에 설정한 내용을 동일하게 복사하고

설정 아래쪽에 sass-loader 부분을 추가해 보자







WebPack v1에서 적용 시키기 ------------------------------------

2018 10 01일에 create-react-app v2 버전이 릴리즈 되어서
webpack 구조도 바뀌게 되었다. 

만약 이전 버전을 쓰고 있거나 쓰길 희망한다면 이 부분을 보는것을 추천한다.


참고 : https://github.com/velopert/learning-react#%EC%9D%BD%EC%96%B4%EC%A3%BC%EC%84%B8%EC%9A%94
> npx create-react-app sample-project --scripts-version=1.1.5

로 프로젝트를 만들면 된다.



webpack.config.dev.js

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
  {
         test: /\.css$/,
         (...)
      },
      {
        test: /\.scss$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
          {
            loader: require.resolve('sass-loader'),
            options: {
              // 나중에 입력
            }
          }
        ],
      },
cs
bold된 부분을 추가 하면 된다.
 -------------------------------------------------------------------------------------------------





WebPack v2에서 적용 시키기 ---------------------------------------
참고 : https://github.com/velopert/learning-react/issues/42


현재 webpack 버젼의 config.dev.js 안을 보면
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
        },
          // Opt-in support for SASS (using .scss or .sass extensions).
          // Chains the sass-loader with the css-loader and the style-loader
          // to immediately apply all styles to the DOM.
          // By default we support SASS Modules with the
          // extensions .module.scss or .module.sass
          {
            test: sassRegex,
            exclude: sassModuleRegex,
            use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
          },
          // Adds support for CSS Modules, but using SASS
          // using the extension .module.scss or .module.sass
          {
            test: sassModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'sass-loader'
            ),
          },
cs

모듈 sass를 정의해 놓은곳이 있는데 




이렇게 바꿔준다.

1
2
3
4
5
6
7
8
9
10
11
{
            test: sassRegex,
            exclude: sassModuleRegex,
            use: getStyleLoaders({ importLoaders: 2 }).concat({
              loader: require.resolve('sass-loader'),
              options: {
             //  includePaths: [paths.appSrc + '/'],
             //   data: `@import 'utils';`
              }
            })
          },
cs





--------------------------------------------------------------------------------------






환경설정을 다 잡았다면


파일 확장자를 App.css -> App.scss 로 변경( .sass 아님 주의 할 것 )


App.js

1
2
import React, { Component } from 'react';
import style from './App.scss';
cs

App.js에서도 동일하게 App.scss로 변경해준다.








App.scss

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
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
  &.blue {
    background: blue;
  }
 
  &:hover {
    background: yellow;
  }
 
  &:active {
    background: red;
  }
}
 
.blue {
  background: blue;
}
cs


이렇게 Sass방식으로 수정해 주었다.


.blue 클래스도 현재 선택자 참조 기능을 사용하여 .box안에 넣어주었다.






감싸는 구조


App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { Component } from 'react';
import styles from './App.scss';
import classNames from 'classnames/bind';
 
const cx = classNames.bind(styles);
 
export default class App extends Component {
  render() {
    const isBlue = 'true'; 
       return (
      <div className={cx('box',{blue: isBlue})}>
        <div className={cx('box-inside')}/>
      </div>
    );
  }
 
cs


box내부에 box-inside클래스를 가진 div요소를 만들었다.

box내부에 있을 때만 작동하기 원한다면


css로는 이렇게 했을 것인데

1
2
3
.box .box-inside{

}
cs



sass를 사용하면 이렇다

1
2
3
4
5
.box {
    .box-inside{
    
    }
}
cs





Sass 변수 사용

Sass에서는 변수선언하여 사용할 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$size: 100px;

.box {
  display: inline-block;
  width: $size;
  height: $size;
  border: 1px solid black;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  &.blue {
    background: blue;
  }
  &:hover {
    background: yellow;
  }
  &:active {
    background: red;
  }
}
cs









믹스인 사용


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
$size: 100px;
@mixin place-at-center() {
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}
.box {
  display: inline-block;
  width: $size;
  height: $size;
  border: 1px solid black;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  &.blue {
    background: blue;
  }
  &:hover {
    background: yellow;
  }
  &:active {
    background: red;
  }
    @include place-at-center();
}
cs


이렇게 함수를 정의하여도 사용이 가능하다.


이외에도 믹스인은 다양한 방식으로 활용이 가능한데

다른 개발자들 사전에 만들어둔 라이브러리를 설치해서 사용 할 수도 있다

나중에 반응형 디자인을 돕는 믹스인 라이브러리

include-media도 사용해보자






변수와 믹스인을 전역으로 사용


스타일 ( src/styles/ )디렉터리에 파일( utils.scss )을 만들어 전역적으로 코드를 분리하여

컴포넌트 스타일 파일에서 불러와 사용해보자


src/styles/utils.scss

1
2
3
4
5
6
7
8
$size: 100;

@mixin place-at-center(){
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
cs


이렇게 만들고 나면 App.scss에서 다음과 같이 불러와 사용할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
@import './styles/utils';
.box {
  display: inline-block;
  width: $size;
  height: $size;
  border: 1px solid black;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
cs





그런데 앞으로 컴포넌트를 저장하는데 디렉터리가 좀 더 깊어진다면???

파일을 불러 올 때마다 상위 디렉터로를 작성해야 한다.


1
@import '../../../styles/utils';
.cs




그래서 webpack.config.dev.js 에서의 

webpack의 sass-loader를 설정을 바꿔주면 된다.



1
2
3
4
5
6
7
8
9
10
11
12
        {
            test: sassRegex,
            exclude: sassModuleRegex,
            use: getStyleLoaders({ importLoaders: 2 }).concat({
              loader: require.resolve('sass-loader'),
              options: {
               includePaths: [paths.appSrc + '/style'],
               data: `@import 'utils';`
              }
            })
          },
 
cs

객체를 내보내는 코드 includePaths 내보내는 경로를 지정할 수 있다.




1
const paths = require('./paths');
cs
paths안에는 node의 require로 패스들의 정보를 가져오는데 그안에 

앱 소스 경로를 가져올수 있다.


내 경로는 이렇게 되어져있는데

paths.appSrc: 'C:\\Project\\Test\\life-cycle-test\\src',



이렇게 내보내기 할 경로 'styles' 디렉토리를 지정해주면된다

1
includePaths: [paths.appSrc + '/styles'],
cs



[import 지정 방법 ]

방법 1) 

같이 보낼 Data도 지정할 수있다. 

1
data: `@import 'utils';`
cs



방법 2) 

data: 를 추가하고 싶지않다면 

App.scss

1
2
3
4
5
@import 'utils';

.box{

}
cs

이렇게 scss에 import를 따로 받아도 된다.







책과 함께 

여기를 참고 하면 될 것 같다.

https://velog.io/@velopert/react-component-styling


저작자표시 비영리

'Javascript > React.js' 카테고리의 다른 글

ReactJS - 컴포넌트 이용한 게시판  (0) 2018.12.01
ReactJS - Redux  (0) 2018.11.24
React - 함수형 컴포넌트  (0) 2018.11.01
React - 라이프 사이클  (1) 2018.10.31
React - 컴포넌트 반복  (0) 2018.10.28
'Javascript/React.js' Related Articles more
Comments