[Laravel/Vue.js] Vuetify 를 설치할 때 SASS 에러가 나는 경우

Laravel 에서는 Vue-cli 가 설치 되어있지 않기 때문에 npm 을 통하여 필요한 Dependency 를 설치해주어야 된다. 설치하는 방법은 자음의 공식 사이트에서 Webpack 설치에 대해 확인하도록 한다.

Vuetify — A Material Design Framework for Vue.js

설치를 하게 되고 나서 Vuetify 를 Vue 에 적용하고자 할 때, 다음 2가지의 방법이 있다.

1. 프레임워크 전체를 Import 시키는 경우
2. 내가 프로젝트 내에서 필요한 Vuetify 컴포넌트 들만 Import 시키는 경우 (Vuetify-loader) 를 사용하는경우

인데, 여기서 전자의 경우에는 너무나도 쉽게 공식홈페이지 문서에 나와있는 대로 입력하면 바로 실행을 할 수 있다. 그러나 나의 경우에는 Vuetify 를 프레임워크처럼 사용하는 것은 아니고, 그 중에서 필요한 일부 컴포넌트들만 라이브러리 처럼 사용하려 하기 때문에 후자의 경우를 택했으며, 후자의 경우를 하는 중에 문제가 발생하여 해결 방법에 대해 정리를 하려 한다.

---

Vuetify-loader 를 사용하는 방법은 다음 페이지에 잘 나와있다.

Vuetify — A Material Design Framework for Vue.js

 

요약을 해본다면, 프레임워크 전체를 사용할 때와는 다르게 import 하는 타겟이 vuetify/lib 가 되었으며, Webpack 플러그인 설정 항목에 VuetifyLoaderPlugin 이 들어가게 되는 것이다. 그리고 sass 설정을 통해서 Vuetify 의 스타일을 컴파일 할 수 있도록 했다.

 

그 다음에 Webpack 을 돌려 보았는데 예상치 못한 에러들이 주르륵 발생하였다. 바로 어떤 문제냐...

SassError: Expected newline 이라고 하며, 세미콜론에만 계속 에러메세지가 걸리는 것이다. SASS 를 다루는 경험은 처음이라 이게 무슨 에러인지, 어떻게 된 아이인 지 전혀 알 수가 없었다. 게다가 가장 중요한 것은 공식 홈페이지의 내용을 고대로 사용했는데 안되었다는 것이다. 

 

Webpack 에서 뭔가 빠진것이 있나 해서 열심히 SASS 관련 rule 의 옵션 값을 만져봤지만, 옵션과는 관계가 없는 건지 똑같은 에러만 뱉어내는 것이다. 그러다가 구글링하여 찾아낸 방법이,

Vuetify 2 sass compile error · Issue #2173 · laravel-mix/laravel-mix

나와 같은 현상이 발견되는 사람들이 많았던 것 같다. 그래서 webpack.mix 파일에 다음 내용을 추가해야 한다.

Mix.listen('configReady', webpackConfig => {
    const sassConfig = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.sass$/)
    );

    const scssConfig = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.scss$/)
    );

    const vuetifyPath = path.resolve(__dirname, 'node_modules/vuetify')

    sassConfig.exclude.push(vuetifyPath)
    scssConfig.exclude.push(vuetifyPath)
});

위치는 mix 를 require 한 다음에 하는 것이 좋아보인다. 해당 소스를 삽입한 다음에 돌리게 되면, ERROR 를 뱉어내던 터미널은 사라지게 된다. 단,

무수히 많은 Warning 들이 보이게 된다. 원인은 "Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0." 때문이라는데 컴파일은 되기 때문에 무시해도 상관은 없다. 나중에는 Vuetify 가 해결해 줘야 하는 부분이긴 하지만 현재에는 Warning 이 뜨는 걸 볼 수 밖에 없는 상황이다.

 

그래서 이 Warning 을 뱉어내는걸 막을 수는 없을까 찾아보다가 발견한 것은, sass 의 dependency 버전을 다운그레이드 시키는 것이었다. 나는 그냥 npm 을 통해 최신 버전을 깔았기 때문에

"sass": "^1.54.4",

버전이 설치되어있지만,

"sass": "~1.32.12",

다음 버전으로 다운을 받게 된다면 Warning 이 사라지게 된다. 그러나 이렇게 된다고 Deprecated 를 대처한 최고의 방법은 아니기 때문에 이 문제는 Vuetify 만든 사람들이 해결해 줘야 되지 않을까 싶다.