scss2 36. Vue - 컴포넌트 전역 스타일 1. Sass loader 일반적으로 부트스트랩을 사용하게 되면 사용하는 컴포넌트의 script 태그에 매번 @import 키워드를 통하여 부트스트랩을 가져오게 된다. 하지만, 이러한 방식은 코드를 반복적으로 사용하게 되어 코드의 효율이 떨어지게 된다. 계속해서 컴포넌트를 로드할 때마다 해당 부트스트랩 파일을 읽어야 하기 때문이다. 그렇다면 한번에 스타일을 읽어올 수 있다면 더 효율적이지 않을까? 그러한 방법은 없을까? 이를 해결해주는 오픈소스가 Sass-loader 이다. 2. 설치 https://github.com/webpack-contrib/sass-loader webpack-contrib/sass-loader Compiles Sass to CSS. Contribute to webpack-contr.. 2021. 6. 21. 4. webpack - SCSS 적용하기 1. 확장자 변경 이전 포스팅에서 만들었던 CSS 폴더와 파일을 SCSS로 변경해준다. 파일의 경우 확장자만 변경해주면 된다. 기존의 main.js에 설정해놓은 CSS 파일의 경로도 수정해준다. 기존에 설정해놓은 webpack.config.js의 경로도 수정해준다. 2. scss 패키지 설치 자바스크립트(webpack.config.js)에서 CSS를 읽고 적용할 수 있도록 style-loader와 css-loader를 설치하였다. 이번에는 SCSS를 읽고 적용할 수 있도록, 필요한 패키지를 설치하고 적용해보자. 터미널 입력: npm i -D sass-loader sass 설치 후 webpack.config.js에 패키지 설정을 추가한다. 3. scss 작성하기 main.scss에 다음과 같은 코드를 작성.. 2021. 5. 6. 이전 1 다음
