Vue.js에서 Sass / Scss 사용하기

Vue-cli에서의 SCSS

모듈의 설치와 적용

VueJS에서는 vue-loader 덕분에 Single File Component 구성의 .vue 내에서 style 태그에 lang="scss" 요소만 추가하면 scss를 적용할 수 있다.

# scss 관련 모듈 설치
npm install --save-dev node-sass sass-loader

<style lang="scss">
$backgroundColor: red;

    .className: {
        background: $backgroundColor;
    }
</style>

전역 범위에서의 사용

SCSS는 일반적으로 사용 시에 variables 또는 mixin, 함수를 별도의 scss 파일로 분리하여 사용하므로 모든 파일에서 @import를 반복적으로 실행하는 불편함이 있다.

vue-cli의 "@"는 "/src"와 같다

<style lang="scss">
@import "@/style/variables";
@import "@/style/mixin";
@import "@/style/functions";
</style>

반복 작업을 피하기 위해 위의 파일들을 전역에서 사용 가능하게 바꿔줘야 한다.

vue-cli의 2.x 버전에서는 webpack.config.js 파일이 루트 디렉토리에 있었지만, 3.x 버전에서는 없어졌으므로 설정을 추가하기 위해서는 루트 디렉토리에 vue.config.js 파일을 설정하고 내용을 추가해줘야 한다.

// vue.config.js
module.exports = {
    //options
}

loaderOptions라는 vue-loader의 내부 구성을 변경하는데 사용할 수 있는 css 옵션이 있다.

아래의 설정을 통하여 sass-loader에 추가된 모든 코드는 전역 범위에서 사용 가능하다.

//vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "@/styles/_variables.scss";
                    @import "@/styles/_mixins.scss";
                `
            }
        }
    }
}

// style.variables.scss
$bgColor: red;

// .vue
<script lang="scss">
    .className {
        background: $bgColor;
    }
</script>