[Vue.js] 나를 소개하는 홈페이지 만들기 (4) - SCSS 에러, SCSS 전역으로 설정하기

Next14 + Netlify 로 새로 작성했습니다.

https://whothatsme.tistory.com/42

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)

 

---

 

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

 

scss로 변환하면서 @mixin 메서드를 사용하려 하니 오류가 생긴다. 변수 값도 읽어내지 못한다. 에러를 읽어보니 sass-loader의 문제인것 같은데 왜 그런지 찾아보았다.

Node.js 버전은 16.15.0

Vue 는 3.2.35

 

node-sass 가 잘못됐나?

https://www.npmjs.com/package/node-sass

버전에도 이상이 없다. node에 알맞는 버전을 설치해야했고, node-sass는 7.x 버전인데 안된다. 그러다 문득 import의 위치를 바꾸어 보았다.

// App.vue
// 이전
<style lang="scss">
.container {
  background-color: $test;
}
@import "@/scss/main.scss";
</style>

// 변경
<style lang="scss">
@import "@/scss/main.scss";
.container {
  background-color: $test;
}
</style>

import 의 위치에 따라 scss가 불러지지가 않는다. 따라서 모듈을 빌드할 때 에러가 생긴다.

당연히 위에서 아래로 코드를 읽기 때문에, 위치 지정을 정확하게 해주어야 했다.

 

매번 @import를 입력하면 너무나도 불편할 것이다. 전역으로 설정해서 자주 사용하는 변수나 값을 사용해보자.

 

scss 전역으로 설정

/* @/assets/scss/_variable.scss */

$TEST_BG : rgb(27, 153, 101);

// App.vue
<style lang="scss">
#test {
  background-color: $TEST;
}
</style>

이처럼 다른 파일에 지정된 변수 값을 import 없이 불러오기 위해서는 vue.config.js를 변경해야만 한다.

// Vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
        @import "@/assets/scss/_variable.scss";
        @import "@/assets/scss/main.scss";
        `
      },
    }
  }
}

이때 절대경로 '@'는 'src/'를 의미한다.

 

따라서 다음처럼 저장해두면 전역으로 설정이 간단하게 마무리 된다. 마지막으로 가장 중요한 것은 config 파일을 수정 후 프로젝트를 리빌드를 해야만 한다. 그 어느 곳에서도 설명 되어있지 않아서 애꿎은 노트북만 탓했다....😂

 

이제 조금 더 틀을 잡아 봐야겠다.