설명
Vue cli3 이상부터는 프로젝트를 생성할 때 scss 관련 기능을 쉽게 추가할 수 있습니다. 하지만 프로젝트 진행 중간에 scss를 적용할 일이 생겨 해당 내용을 정리하였습니다 🙂
scss 패키지 설치
제일 먼저 해당 package에 node-sass와 sass-loader를 설치해줍니다.
npm install --save-dev node-sass sass-loader주의 할 점은 vue 2.6 버전에서는 sass-loader 10버전 대를 지원하기 때문에 그보다 버전이 높다면 10으로 버전을 내리고 재 설치 해주시면 됩니다.
사용법
설치를 완료했다면 끝입니다! 이제 바로 컴포넌트 내에서 scss를 사용할 수 있습니다. 간단한 설치 만으로 사용이 가능한 이유는 vue-loader에서 기본으로 설정되어 있는 webpack 설정 때문에 패키지 설치 후 컴포넌트 내에서 lang 속성을 지정해주면 자동으로 Loader를 사용하여 바로 사용할 수 있습니다.
// 컴포넌트 내에 lang 속성으로 scss를 명시 해줍니다.
// 스타일 내부 scss 파일 import하는 방법
// 경로에서 @의 경우 /src와 같은 의미입니다
<style lang="scss">
@import "@/asstes/scss/파일명";
</style>전역 스타일 및 변수 설정
변수를 담아둔 scss파일을 매번 컴포넌트에서 불러와서 사용하는 것은 매우 불편한 방법이고 효율적이지 않습니다. 따라서 자주 사용하는 변수나 reset스타일, mixin같은 경우 전역 스타일를 설정하여 사용이 가능합니다.
설정 방법은 프로젝트 최상단에 vue.config.js 파일을 생성하여 webpack 설정을 추가할 수 있습니다. sass-loader 버전에 따라서 설정법이 조금씩 다른데 전체적인 구조는 같지만 8버전에서는 prependData로 선언해야 하고 그 이상의 버전에서는 아래 처럼 additionalData를 선언하면 전역으로 scss이 적용되게 됩니다.
// webpack 설정을 추가
module.exports = {
css : {
loaderOptions : {
sass : {
additionalData: `
@import "@/assets/scss/abstracts/abstracts.scss";
`
}
}
}
}// 예시
// abstracts.scc
$TEXT_DEAFULT : #333;
// 다른 컴포넌트
<style lang="scss">
p {
color : $TEXT_DEAFULT
}
</style>vue cli 2버전의 경우
만약 cli2 버전의 경우 webpack.confing.js 에서 설정을 변경해줘야 합니다.
{
test: \/.scss&/,
use: [
"vue-styles-loader",
"css-loader",
{
loader: "scss-loader",
options: {
data: `
@import "@/assets/scss/abstracts/abstracts.scss";
`
}
}
]참고 사이트
