Sass 사용법

Sass (Syntactically awesome style sheets)
CSS (stylesheet language)

"SCSS" (Sassy CSS)
- CSS 와 유사한 문법의 Sass


//===============
* node package 설치
style-loader(css를 html style에 출력)
css-loader(js안의 css해석, 의존성 해결)
sass-loader(sass -> css)
node-sass(sass -> css)

babel : 자바스크립트 ES6 -> ES5 로 변환

npm install style-loader css-loader sass-loader node-sass --save-dev


//================
- webpack.config.js 설정
module.exports = {
module: {
rules: [
            {
                test:/\.(s*)css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
}
  }




//=========================
//참고
https://heropy.blog/2018/01/31/sass/

https://medium.com/a-beginners-guide-for-webpack-2/using-sass-9f52e447c5ae
https://jsstudygroup.github.io/jsStudyBlog/posts/webapck02/
https://heropy.blog/2017/10/18/webpack_1_start_ejs_sass/
https://medium.com/@shlee1353/%EC%9B%B9%ED%8C%A9-%EC%9E%85%EB%AC%B8-%EA%B0%80%EC%9D%B4%EB%93%9C%ED%8E%B8-html-css-%EC%82%AC%EC%9A%A9%EA%B8%B0-75d9fb6062e6