[Vue] scss 파일에서 @ src alias 사용 시 정상 동작하지 않음, Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve

- css파일도 마찬가지

 

1. jsconfig.json(또는 tsconfig.json)과 vue.config.js 확인

- 두 파일 모두 path가 잘 설정되어 있는지 확인

 

 jsconfig.json ( 또는 tsconfig.json ) 

{
	"compilerOptions": {
		"module": "umd",
		"paths": {
			"@" : ["./src/*"],
		}
	},
	"exclude": ["node_modules"],
	"removeComments": true
}

 

 vue.config.js 

const path = require('path');

module.exports = {
    lintOnSave: false,
    configureWebpack: {
        resolve: {
            alias: {
                '@': path.join(__dirname, 'src/')
            }
        }
    }
}

 

※ webpack.config.json 파일 존재 시, 해당 파일에 path도 맞춰줘야 함

 

2. *.scss (또는 *.css) 파일 수정

- alias 앞에 물결 추가

 

url('@/assets/test.png') 였다면

url('~@/assets/test.png')로 수정