Svelte - VSCode Can't find stylesheet to import scss prependData 설정 문제 해결

오랫만에 Svelte 코드를 수정할 일이 있어서 파일을 열었는데 온통 붉은 빛으로 물든다...

확인해보니, Can't find stylesheet to import scss 오류와 함께, svelte.config.js에서 지정한 prependData 설정이 잘못되었다고 한다.

흠... 한참을 들여다보다가, 문제의 원인을 확인한 부분은 바로... 경로에 있다는 것을 알게 되었다.

위 경로를 보면,

./src/scss/main.scss

상대 경로로 되어 있어 실제 사용할 때에는 문제가 없지만, VSCode입장에서는 어디인지 위치 확인이 원할하지 않은 문제..

그래도 붉은색은 개발자에게 있어서 매우 불길한 색상이기에 검색을 해본 결과 절대 경로로 설정할 수 있는 방법을 찾았는데 아래와 같다.

import path, { dirname } from 'path'
import { fileURLToPath } from 'url'

const filePath = dirname(fileURLToPath(import.meta.url)) // 현재 파일의 경로를 가져옴
const sassPath = `${filePath}/src/scss/` // scss 폴더 경로

module.exports = {
    preprocess: require('svelte-preprocess')({
        scss:{
            prependData: `@import '${sassPath}main.scss';` // scss 폴더 경로를 main.scss에 추가
        },
        postcss:{
            plugins: [
                require('autoprefixer')()
            ]
        },
        bable: bableOptions()
    })
}

전체코드는 아래와 같다.

svelte.config.js

//추가 코드
import path, { dirname } from 'path'
import { fileURLToPath } from 'url'

const filePath = dirname(fileURLToPath(import.meta.url)) // 현재 파일의 경로를 가져옴
const sassPath = `${filePath}/src/scss/` // scss 폴더 경로

const production = process.env.NODE_ENV === 'production'


function bableOptions() {
    return {
        plugins: production
        ? ['transform-remove-console'] 
        : []
    }
}

module.exports = {
    preprocess: require('svelte-preprocess')({
        scss:{
            prependData: `@import '${sassPath}main.scss';` // scss 폴더 경로를 main.scss에 추가
        },
        postcss:{
            plugins: [
                require('autoprefixer')()
            ]
        },
        bable: bableOptions()
    })
}