21. CRA V2 (create-react-app) sass-loader 경로 패치

yarn eject로 따로 webpack.config.js 에서 수정하지 않고 쉽게 할수있다.

 

폴더 PATH의 목록입니다.

C:.
│  index.js
│  out.txt
│  Root.js
│  serviceWorker.js
│  ssr.js
│  
├─components
│  │  App.js
│  │  
│  ├─common
│  │  ├─Button
│  │  │      Button.js
│  │  │      Button.scss
│  │  │      index.js
│  │  │      
│  │  ├─Footer
│  │  │      Footer.js
│  │  │      Footer.scss
│  │  │      index.js
│  │  │      
│  │  ├─Header
│  │  │      Header.js
│  │  │      Header.scss
│  │  │      index.js
│  │  │      
│  │  ├─MarkdownRender
│  │  │      index.js
│  │  │      MarkdownRender.js
│  │  │      MarkdownRender.scss
│  │  │      
│  │  └─PageTemplate
│  │          index.js
│  │          PageTemplate.js
│  │          PageTemplate.scss
│  │          
│  ├─editor
│  │  ├─EditorHeader
│  │  │      EditorHeader.js
│  │  │      EditorHeader.scss
│  │  │      index.js
│  │  │      
│  │  ├─EditorPane
│  │  │      EditorPane.js
│  │  │      EditorPane.scss
│  │  │      index.js
│  │  │      
│  │  ├─EditorTemplate
│  │  │      EditorTemplate.js
│  │  │      EditorTemplate.scss
│  │  │      index.js
│  │  │      
│  │  └─PreviewPane
│  │          index.js
│  │          PreviewPane.js
│  │          PreviewPane.scss
│  │          
│  ├─list
│  │  ├─ListWrapper
│  │  │      index.js
│  │  │      ListWrapper.js
│  │  │      ListWrapper.scss
│  │  │      
│  │  ├─Pagination
│  │  │      index.js
│  │  │      Pagination.js
│  │  │      Pagination.scss
│  │  │      
│  │  └─PostList
│  │          index.js
│  │          PostList.js
│  │          PostList.scss
│  │          
│  ├─modal
│  │  ├─AskRemoveModal
│  │  │      AskRemoveModal.js
│  │  │      AskRemoveModal.scss
│  │  │      index.js
│  │  │      
│  │  ├─LoginModal
│  │  │      index.js
│  │  │      LoginModal.js
│  │  │      LoginModal.scss
│  │  │      
│  │  └─ModalWrapper
│  │          index.js
│  │          ModalWrapper.js
│  │          ModalWrapper.scss
│  │          
│  └─post
│      ├─PostBody
│      │      index.js
│      │      PostBody.js
│      │      PostBody.scss
│      │      
│      └─PostInfo
│              index.js
│              PostInfo.js
│              PostInfo.scss
│              
├─containers
│  ├─common
│  │      Base.js
│  │      FooterContainer.js
│  │      HeaderContainer.js
│  │      
│  ├─editor
│  │      EditorHeaderContainer.js
│  │      EditorPaneContainer.js
│  │      PreviewPaneContainer.js
│  │      
│  ├─list
│  │      ListContainer.js
│  │      
│  ├─modal
│  │      AskRemoveModalContainer.js
│  │      LoginModalContainer.js
│  │      
│  └─post
│          Post.js
│          
├─lib
│      api.js
│      asyncComponent.js
│      
├─pages
│      EditorPage.js
│      index.async.js
│      index.js
│      ListPage.js
│      NotFoundPage.js
│      PostPage.js
│      
├─store
│  │  configure.js
│  │  
│  └─modules
│          base.js
│          editor.js
│          index.js
│          list.js
│          post.js
│          
└─styles
    │  base.scss
    │  utils.scss
    │  
    └─lib
            _all.scss
            _mixins.scss
            

 

.env

MONGO_URI=mongodb://localhost:27017/blog
SASS_PATH=./node_modules;./src

MONGO_URI 는 몽고디비 환경변수 설정(몽고디비 관련한사람만 추가하면됨)

 

SASS_PATH 는 .sass 경로 설정

단, node-sass 설치되어있어야됨

$ npm install node-sass --save
$ # or
$ yarn add node-sass

https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav

Create React App · Set up a modern web app by running one command.

 

힌트가 되었던 사이트

https://alligator.io/react/clean-import-statements-in-react/

Super Clean, Refactor-Friendly Import Statements in React

 

https://onoblog.com/absolute-path-imports-create-react-app/

불러오는 중입니다...

 

jsconfig.json

{
    "compilerOptions": {
      "baseUrl": "src",
      "paths": {
          "styles/*":["**/styles/*"]
      }
    },
    "include": ["src"]
}

compilerOptions 와 include는 package.json에서 script : "cross-env NODE_PATH=src" 을 대체할수 있다.  

 

@import 해서 자동으로 관련된 파일이 불러줘야되지만 vscode는 paths를 따로해야됨

paths는 여러개 가능

 

https://code.visualstudio.com/docs/languages/jsconfig

jsconfig.json Reference

 

힌트가 되었던 사이트

https://trustyoo86.github.io/vscode/2018/08/22/vscode-jsconfig.html

kern의 FE-Note