흔히 scss 작성시 다음과 같이 import 하여 사용한다. @import "./variables.scss"; * { margin: 0; padding: 0; color: $primary-color // variables.scss내에 선언된 변수 } 한두번은 괜찮지만 컴포넌트가 10개...100개...1000개 라면? 코드 한줄 한줄 줄이는건 우리에겐 소중하니까... 다음과 같이 설정해주자 // vue.config.js module.exports = { css: { loaderOptions: { sass: { prependData: ` @import "@/style/variables.scss"; `, }, }, }, }; 이제 다른 컴포넌트에서 자유롭게 사용하자 // exampleComponent.js..