티스토리 뷰

VsCode

SASS 컴파일 후 생성되는 css파일 저장 경로 바꾸기

sosohot 2020. 4. 8. 01:27

VsCode에 익스텐션에 아래 3개가 설치되어있어야 합니다.

1. https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented

2. https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

3. https://marketplace.visualstudio.com/items?itemName=glen-84.sass-lint (선택)

 

Live Sass Compiler - Visual Studio Marketplace

OverviewQ & ARating & Review Live Sass Compiler [If you like the extension, please leave a review, it puts a smile on my face.] [If you found any bug or if you have any suggestion, feel free to report or suggest me.] A VSCode Extension that help you to com

marketplace.visualstudio.com

 

Sass - Visual Studio Marketplace

OverviewQ & ARating & Review Indented Sass syntax highlighting, autocomplete & Formatter for VSCode Installing Search for Sass from the extension installer within VSCode or put this into the command palette. ext install sass-indented Features Syntax Highli

marketplace.visualstudio.com

VsCode 좌측 상단 파일(file) > 기본설정(Preferences) > 설정(Setting) 클릭 후 좌측 카테고리에 확장 클릭하면 Live Sass Compile Config가 나옵니다.

settings.json에서 편집 눌러서 아래 코드를 넣어주면 끝.

{
    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css"
        }
    ],
    "liveSassCompile.settings.excludeList": [ 
        "**/node_modules/**",
        ".vscode/**" 
    ],
    "liveSassCompile.settings.generateMap": 
      false,
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ],
}

liveSassCompile.settings.generateMap <<< 이부분을 true로 바꿔주면 소스맵 생성. 하지만 보통 프로젝트에서는 불필요 하므로 기본 false값 유지.

'VsCode' 카테고리의 다른 글

vscode에서 prettier 적용 안될 때  (0) 2021.01.04
vscode 필수 익스텐션 및 설정파일  (0) 2021.01.04
댓글