require
정확히 알고 있었는지..
https://nodejs.org/en/knowledge/getting-started/what-is-require/
Bulma
프로젝트를 셋할때 프론트엔드를 Vue.js 지만 Non SPA로 구성,
CSS 라이브러리를 Bulma, Buefy 라는 UI Component 라이브러리를 사용하게 되었습니다.
그러면 먼저 Bulma를 커스터마이징 할 수 있어야 합니다.
node-sass
sass cli
webpack
이렇게 세 가지 방법으로 나눠져있습니다.
- node-sass, sass cli
node-sass, bulma를 설치하고
bulma.sass를 import할 sass 파일을 하나 만듭니다.
mystyles.scss라고 bulma의 sass를 import 해서
bulma를 wrapping한 mystyles.sass를 만들어서 사용합니다.
node-sass로 sass를 css로 트랜스파일합니다.
그리고 html에 css link해서 사용합니다.
node-sass :
브라우저는 sass의 문법을 모르기 때문에 .sass파일을 .css파일로 트랜스파일링해야합니다.
따라서 sass 환경 설치가 필요합니다.
레퍼런스 : Sass의 소개, 설치와 간단한 명령어 사용법 - PoiemaWeb
- webpack
웹팩도 bulma sass를 wrapping 하는건 마찬가지에요.
다만 webpack도 sass,css를 이해하지 못하기 때문에 sass-loader, css-loader가 필요하니까요.
webpack loader에 작업을 해줍니다. 이 작업은 아래 링크에서 자세히 나와있습니다.
https://bulma.io/documentation/customize/with-webpack/
웹팩 소스맵
소스맵.. 많이 보긴 했는데 이게 뭔지는 모르고 사용해왔음.
배포용으로 빌드한 파일과 원본 파일을 서로 연결해주는 기능입니다.
서버에 배포할때는 성능 최적화를 위해 html,css,js등 웹 리소스들을 압축합니다.
압축하여 배포한 파일에서 에러가 발생하면 어떻게 디버깅하죠..
캡틴판교..
웹팩도 정리해둠 ㅠㅠ
웹팩 레퍼런스
https://joshua1988.github.io/webpack-guide/guide.html
https://jusungpark.tistory.com/52
소스맵에 더 자세한 설명
https://subicura.com/2018/02/14/javascript-debugging.html
