CRA(create-react-app) 환경에서 절대경로 / 전역 Sass 사용하기

🐿/JS

CRA(create-react-app) 환경에서 절대경로 / 전역 Sass 사용하기

나나 (nykim) 2022. 3. 16. 15:03

CRA
- 리액트 프로젝트를 뚝딱 시작할 수 있게 돕는 보일러 플레이트* (*자주 쓰는 수식, 명령어 등을 미리 입력해 놓는 것)
- 그래서 번거롭게 Babel, ESLint, Webpack 등을 따로 설치할 필요가 없다

CRA(create-react-app)에서 config 건드리기

절대경로 설정(alias)을 하려면 Webpack의 config를 건드려야 하지만, CRA로 생성하면 기본적으로 config 파일을 볼 수 없다.

eject 하면 숨겨져 있던 config 파일을 밖으로 꺼낼 수 있지만, 이거 한 번 하면 못 돌리는 옵션인데.... 웹팩이랑 안 친한데.... 🥺

이럴 땐 CRACO(Create React App Configuration Override) 를 사용하자! eject 없이 설정을 건드릴 수 있다 🙌

$ yarn add @craco/craco
$ yarn add -D craco-sass-resources-loader

설치한 후 config 파일들을 슥슥 만져준다.

1. craco가 명령어를 실행하도록 바꾸기

/* package.json 수정 */

{
	...
	"scripts": {
		"start": "craco start",
		"build": "craco build",
		"test": "craco test",
	},
    ...
}

2. craco.config.js 파일 설정

- 타입스크립트 환경이여서 plugins.options.source 를 tsconfig 로 설정했다. (자바스크립트 환경이라면 jsconfig)

/* craco.config.js 생성 */

const CracoAlias = require('craco-alias');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        tsConfigPath: 'tsconfig.paths.json'
      }
    }
  ]
};

3. tsconfig.paths.json 생성 후 경로 설정

- 별도 파일로 분리하지 않고 config.js 내에 직접 입력해도 무관!

/* tsconfig.paths.json 생성 */

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
      // 또는 "@components/*": ["src/components/*"] 처럼 지정 가능
    }
  }
}

4. tsconfig.json 수정

- 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정하는 파일

- extends: 다른 파일의 설정을 상속

- include: 컴파일 할때 포함할 폴더나 파일

/* tsconfig.json 수정 */

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    //...
  },
  "include": ["src", "tsconfig.paths.json"]
}

이렇게 하면 @/components/button 또는 @/styles/_mixin.scss 와 같이 불러와 쓸 수 있다.

이제 craco.config.js 에서 글로벌로 적용할 스타일을 @/styles/로 지정해 줄 수 있다.

const CracoAlias = require('craco-alias');

module.exports = {
  style: {
    sass: {
      loaderOptions: {
        additionalData: `
          @import "@/styles/_variable.scss";
          @import "@/styles/_mixin.scss";
        `
      }
    }
  },
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        tsConfigPath: 'tsconfig.paths.json'
      }
    }
  ]
};

덧1) CRA 기반 Storybook에서 전역 변수 이해하게 만들기

와... 어마무시한 삽질!!

이렇게만 했더니 스토리북에서는 전역 변수를 이해하지 못해서 여러 방면으로 타일러보다가 (왜 이해하질 못하니ㅠㅠ!!)

스토리북의 main.js 에서 sass-loader 에 additionalData 넣는 걸로 해결.

/* .storybook/main.js */

module.exports = {
  //...
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        {
          loader: 'sass-loader',
          options: {
            additionalData: `
            @import "./src/styles/_variable.scss";
            @import "./src/styles/_mixin.scss";
		  `	
          }
        }
      ]
    });
    return config;
  }
};

이유는 모르겠으나 sass-loader 외에 style-loader 나 css-loader도 같이 지정하게 되면,

"import API from "!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";" 에러가 붐붐쳌.

아무래도 기본 설정이랑 어딘가에서 충돌이 나는 것 같지만 지금으로선 알 수 없다... 😭

(참고) (참고) (참고)

덧2) Vite 환경에서 설정하기

CRACO 없이 tsconfig.json, vite.config.js 파일을 설정해주면 된다.

굳이 paths.json 으로 빼지 않고 tsconfig.json 에 경로를 입력해주고, vite.config.ts에 alias를 지정해 준 모습👇

/* tsconfig.json */

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

/* vite.config.ts */

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import * as path from 'path';

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import '@/styles/_variable.scss';
          @import '@/styles/_mixin.scss';
        `,
      },
    },
  },
});

마무리는 역시...