Vue.js 애플리케이션에 SASS를 전역적으로 로드하기

Vue.js 애플리케이션에 SASS를 전역적으로 로드

https://vueschool.io/articles/vuejs-tutorials/globally-load-sass-into-your-vue-js-applications/
Written by Alex Jover Morales

CSS 세계에서 SASS/SCSS, LESS 및 PostCSS가 가장 일반적이며 언어를 향상시키는 훌륭한 전처리기를 많이 볼 수 있습니다. SASS는 작성 날짜까지 여전히 가장 인기 있고 사용되는 솔루션인 것 같습니다. SASS는 모든 기능을 갖추고 있고 이해하기 쉬운 구문으로 CSS 언어를 확장하기 때문에 놀라운 일이 아닙니다.

vue-loader 덕분에 Vue는 원하는 언어의 lang="scss" 속성을 단일 파일 구성 요소의 style 태그에 추가하기만 하면 이러한 솔루션을 사용할 수 있습니다.

<!-- Classroom.vue -->
<style lang="scss">
$bg-classroom: #232323;

.classroom {
  background: $bg-classroom;
}
</style>

프로젝트가 성장함에 따라 SASS 변수, 믹스인 및 함수를 별도의 파일로 분리하기 시작합니다. @import 명령을 사용하여 가져올 수 있습니다.

/* scss/_variables.scss */
$bg-classroom: #232323;

<!-- Classroom.vue -->
<style lang="scss">
@import "./scss/_variables.scss";

.classroom {
  background: $bg-classroom;
}
</style>

지금까지는 좋았지만 변수, 믹스인 또는 함수를 사용하려는 모든 구성 요소에서 해당 파일을 가져와야 하므로 매우 반복적인 작업이 되고 구성 요소 전체에 걸쳐 다음 줄이 반복됩니다.

<style lang="scss">
@import "./scss/_variables.scss";
@import "./scss/_mixins.scss";
@import "./scss/_functions.scss";
/* ... */
</style>

이 문제를 해결하고 모든 SASS 프레임워크 파일을 새로운 vue-cli 3.x에서 전역적으로 로드하는 방법을 살펴보겠습니다.

vue-cli에서 전역 SASS 로드하기

이 섹션의 목적을 위해 기본 구성을 사용하여 vue-cli v3.x 로 생성된 프로젝트가 있다고 가정합니다. 없는 경우 cli를 설치하고 create 명령을 실행하여 만들 수 있습니다.

npm install -g vue-cli
vue create awesome-project-name

여기에서 필요한 SASS 종속성을 설치하여 시작하겠습니다.

npm install --save-dev node-sass sass-loader

Vue-cli를 사용하면 여러 구성 옵션이 있는 개체를 내보내는 프로젝트의 루트에 vue.config.js 파일을 만들어 구성을 수정할 수 있습니다.

그 중 vue-loader의 내부 구성을 변경하는 데 사용할 수 있는 loaderOptions가 포함된 css 옵션이 있습니다.

아마도 이 트릭을 몰랐을 것입니다. 하지만 data 옵션을 사용하여 일부 전역 CSS 전처리기 코드를 실행할 수 있으므로 이를 사용하여 CSS 도구를 가져올 수 있습니다.

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

Note
vue-cli의 @는 /src를 가리키는 별칭입니다.

loaderOptions 옵션 아래에 sass 로더를 지정했습니다. 마찬가지로 해당 파일의 모든 코드는 전역 범위에서 사용할 수 있습니다. 따라서 모든 구성 요소에서 즉시 사용할 수 있습니다.

<style lang="scss">
.classroom {
  /* No need to import, it just works \o/ */
  background: $bg-classroom;
}
</style>

vue-cli 3.x를 사용하지 않는 프로젝트 설정

vue-cli 3.x를 사용하지 않는 경우 Webpack 구성 파일에서 vue-loader 옵션을 조정해야 합니다.

여기에서 예를 볼 수 있습니다.

// webpack.config.js
{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        data: `
          @import "@/scss/_variables.scss";
          @import "@/scss/_mixins.scss";
        `
      }
    }
  ]
}

Webpack 구성에 대해 더 깊이 파고들지는 않을 것입니다. 이 기사의 범위를 벗어나고 여러 기사를 자체적으로 다룰 수 있기 때문입니다. 대신 글로벌 SASS 로딩을 달성하기 위해 변경해야 할 사항을 보여드리겠습니다.

주의 사항

데이터 구성에서 가져오는 파일에 변수, 믹스인 및 함수와 같이 렌더링되지 않는 SASS 코드만 포함되어 있는지 확인해야 합니다. 그렇지 않으면 해당 코드는 최종 사후 처리된 CSS 파일의 각 구성 요소에 대해 반복됩니다.

작동방식
vue-loader는 각 구성 요소 CSS에 정의한 모든 파일을 앞에 추가합니다.

예를 들어, 10개의 구성 요소가 있고 위에서 본 것처럼 variables.scss 파일을 미리 로드하고 variables.scss 파일에 다음과 같은 CSS 규칙이 포함되어 있다고 가정해 보겠습니다.

.box {
  color: $red-color;
}

이는 실제로 각 구성 요소의 CSS 부분에 포함되어 10개의 반복되는 .box 규칙으로 끝납니다.

마무리

이 기사가 저에게만큼 유용했기를 바랍니다. SASS 가져오기를 반복하지 마십시오!