SASS

utils 함수 분리하기

여러 파일에서 사용될 수 있는 sass변수 및 믹스인은 다른 파일로 분리하여 작성한 뒤 필요한 곳에서 쉽게 불러와 사용할 수 있다.

SassComponent에서 믹스인과 변수를 utils.scss파일로 옮기자

// 변수 사용하기
$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;
$green: #40c057;
$blue: #339af0;
$indigo: #5c7cfa;
$violet: #7950f2;

// 믹스인 만들기(재사용되는 스타일 블록을 함수처럼 사용할 수 있음)
@mixin square($size) {
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}

utlis.scss파일에서 선언한 변수와 믹스인을 Sasscomponent.scss에서 사용해보자.
다른 scss파일을 불러올 때는 @import구문을 사용한다.

@import "./utils.scss";

.SassComponent {
  display: flex;
  .box {
    //일반 css에서는 .SassComponent .box와 마찬가지
    background: red;
    cursor: pointer;
    transition: all 0.3s ease-in;
    & .red {
      // .red클래스가 .box와 함께 사용되었을 때
      background: $red;
      @include square(1);
    }
    &.orange {
      background: $orange;
      @include square(2);
    }
    &.yellow {
      background: $yellow;
      @include square(3);
    }
    &.green {
      background: $green;
      @include square(4);
    }
    &.blue {
      background: $blue;
      @include square(5);
    }
    &.indigo {
      background: $indigo;
      @include square(6);
    }
    &.violet {
      background: $violet;
      @include square(7);
    }
    &:hover {
      // .box에 마우스를 올렸을 때
      background: black;
    }
  }
}

sass-loader 설정 커스터마이징하기

프로젝트에 디렉터리를 많이 만들어서 구조가 깊어지면 상위 폴더로 한없이 거슬러 올라가야 하는 단점이 있다.

@import '../../../....'

해당 문제는 웹팩에서 Sass를 처리하는 sass-loader의 설정을 커스터마이징하여 해결할 수 있다.
cra로 만든 프로젝트는 구조 복잡도를 낮추기 위해 세부 설정이 모두 숨겨져 있다. 이를 커스터마이징하려면 프로젝트 디렉터리에서 yarn eject명령어를 통해 세부 설정을 밖으로 꺼내 주어야 한다.

지금까지 진행한 내용을 커밋하고 yarn eject명령어를 실행한다.

이제 프로젝트 디렉터리에 config라는 디렉터리가 생성되었을 것이다.
그 디렉터리 안의 webpack.config.js를 열어보자.

그 파일 안에서 "sassRegex"라는 키워드를 찾자.

 {
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'sass-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

여기서 use:에 있는 'sass-loader'부분을 지우고 concat을 통해 커스터마이징된 sass-loader 설정을 넣어주자.

{
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders({
                importLoaders: 3,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
              }).concat({
                loader: require.resolve("sass-loader"),
                options: {
                  includePaths: [paths.appSrc + "/styles"],
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

이 설정을 저장한 후 서버를 껐다가 재시작하자.
이제 utils.scss파일을 불러올 때 현재 수정하고 있는 scss파일 경로가 어디에 위치하더라도 앞부분에 상대 경로를 입력할 필요 없이 styles디렉터리 기준 절대 경로를 사용하여 불러올 수 있다.

음 그런데 오류가 발생했다.

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'includePaths'. These properties are valid:
   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }