Vue에서 스타일 사용자 정의를 위해 SCSS를 사용하는 방법

Vue에서 스타일 사용자 정의를 위해 SCSS를 사용하는 방법

Vue 프로젝트에서 스타일을 더 잘 사용자 정의하려면 SCSS(Sassy CSS)를 사용하는 것이 좋습니다. SCSS는 CSS의 확장 언어로 중첩 규칙, 변수, 혼합 등과 같은 많은 유용한 기능을 제공하여 스타일 코드를 보다 효율적으로 작성할 수 있습니다. 다음은 Vue 프로젝트에서 스타일 사용자 정의를 위해 SCSS를 사용하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다.

먼저 Vue 프로젝트를 준비하고 프로젝트에서 SCSS 컴파일러를 구성해야 합니다. 일반적으로 사용되는 SCSS 컴파일러에는 node-sass 및 sass-loader가 있으며 필요에 따라 둘 중 하나를 선택하여 사용할 수 있습니다. 다음 예에서는 sass-loader를 컴파일러로 사용합니다.

1. 종속성 설치

터미널에 Vue 프로젝트의 루트 디렉터리를 입력하고 다음 명령을 실행하여 sass-loader 및 node-sass를 설치합니다.

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

2. SCSS 파일 만들기

프로젝트에서 SCSS 파일을 저장할 새 폴더를 만듭니다. 예를 들어, styles라는 폴더를 만들고 그 안에 main.scss라는 파일을 만듭니다. 이 main.scss 파일은 전역 스타일을 작성하는 데 사용됩니다.

3. Configure webpack

프로젝트의 루트 디렉터리(일반적으로 webpack.config.js 또는 vue.config.js)에서 webpack 구성 파일을 찾고 구성 파일에 SCSS에 대한 지원을 추가하세요.

구성 파일에서 module.exports 섹션을 찾은 후 다음 코드를 추가하세요.

module: {
  rules: [
    // ...
    {
      test: /.scss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        'sass-loader'
      ]
    }
  ]
}

이것은 SCSS 파일에 대한 webpack의 지원을 구성합니다.

4. SCSS 코드 작성

main.scss 파일에서는 전체 프로젝트에서 사용할 일부 변수 정의, 믹스인 등 전역 스타일을 작성할 수 있습니다.

샘플 코드:

// 定义颜色变量
$primary-color: #42b983;
$secondary-color: #f44336;

// 定义混合
@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

// 样式示例
.container {
  background-color: $primary-color;
  padding: 20px;

  .title {
    color: $secondary-color;
  }

  .button {
    @include box-shadow(2px, 2px, 5px, #ccc);
    background-color: $secondary-color;
    color: $primary-color;
  }
}

5. SCSS 파일을 Vue 구성 요소에 도입

Vue 구성 요소에서 SCSS 정의 스타일을 사용하려면 구성 요소의