rollup-plugin-postcss의 SASS 파일 내 custom alias 처리 문제

* 개발 환경 : react(cra), ts, storybook, sass, tailwind, rollup

 

1. 이슈 사항

프로젝트 내에서 상대경로를 쓰지 않고 custom alias 사용 중인 상황 

ex) @ea => ./src 

 

rollup 에서 custom alias를 처리하기 위한 플러그인으로 @rollup/plugin-alias 가 있다.

https://www.npmjs.com/package/@rollup/plugin-alias

@rollup/plugin-alias

 

해당 플러그인은 ts, tsx 파일 내에서는 잘 매칭하여 변환을 해주지만, 

이상하게 sass 파일내에서만 custom alias를 resolve하지 못하는 상황이 발생...

 

2. 해결 방법

원래 scss파일을 빌드하기 위해

https://github.com/egoist/rollup-plugin-postcss#readme

GitHub - egoist/rollup-plugin-postcss: Seamless integration between Rollup and PostCSS.

해당 플러그인을 많이 사용하지만, scss파일 내부에서 custom-alias(@) 를 사용할 때

sass-loader에서 importer 을 추가해서 처리를 해줘야 하지만,

rollup-plugin-postcss가 커스텀 importer을 추가하지 못하는 버그(?) 가 있어서

(https://github.com/egoist/rollup-plugin-postcss/issues/397) <= 관련 이슈

 

rollup-plugin-styles를 사용하였다.

 

 

내가 정의한 custom-importer는 아래 형태!

const customImporter = (url) => {
    if (url.startsWith('@')) {
        const newUrl = url.replace('@', './src');
        const filePath = path.resolve(__dirname, newUrl);
        const result = {file: filePath};
        return result;
    }
    return null;
};

 

styles() 내부에 추가해주면 된다.

styles({
    url: {
        alias: {'~@': path.resolve(__dirname, './src')},
        publicPath: './assets',
        hash: false
    },
    sass: {
        importer: customImporter,
    },
}),

 

url은 css url resolver옵션으로, 

css 파일 내에서 url() 을 사용할 때 해당 custom alias을 resolve 하도록 만들어주는 속성이다.

나는 빌드됐을 때 이미지 파일들을 assets 안에 넣을 예정이라, publicPath를 assets 이라고 해줬다.

 

@ 앞에 ~가 붙은 이유는 아래 링크 참조..! 

scss파일내에서 background: url("~@/asset/...")형태로 사용해야 하기에...

 

https://stackoverflow.com/questions/39535760/what-does-a-tilde-in-a-css-url-do

What does a `~` tilde in a CSS `url()` do?