[질문] CSS 문법 VSCode 에러 문의

저 같은 경우는 평소에 VS Code 대신 WebStorm을 대부분 사용하고 있고요.

수강생분들과 환경을 그나마 비슷하게 유지하려고 VS Code는 별도 설정하지 않고,

강의 촬영할 때마다 최신 버전으로 새로 설치해 사용하고 있습니다.

저의 VS Code에서는 옵션 files.associations와 emmet.includeLanguages는 모두 비어 있습니다.

어떤 차이가 있어서 해당 내용이 다른지는 아직 모르겠네요.

참고로 저는 macOS Catalina에서 VS Code 1.50.1 버전(최신)을 사용하고 있고,

별도 설정 없이도 Svelte 파일에서 Emmet은 잘 동작합니다.

차이점에 대한 관련 내용을 좀 찾아봐야겠네요.

좋은 정보 감사합니다 :D

소라연님 안녕하세요.

강의 잘 듣고 계셔서 다행입니다 :D

만약 [Trello 클론 앱 만들기 - 예제 실습] > [4. SCSS(svelte-preprocess, node-sass)] 파트의 9분 40초 이후 내용을 진행하셨는데 위와 같은 문제가 발생했다면,

Svelte for VS Code 확장 프로그램의 Svelte Language Server가 rollup.conifg.js의 전처리(preprocess) 옵션을 제대로 해석하지 못하는 문제인 듯합니다.

이는 svelte.config.js을 만들어 사용하는 방법으로 해결할 수 있습니다.(모든 환경에서 권장하는 방법은 아닙니다)

그럼 우선, rollup.config.js 주변에 svelte.config.js 파일을 만들고 다음과 같이 작성하세요.

const sveltePreprocess = require('svelte-preprocess');

// Rollup Watch 기능(-w)이 동작하는 경우만 '개발 모드'라고 판단합니다.
const production = !process.env.ROLLUP_WATCH;

module.exports = {
  // 개발 모드에서 런타임 검사를 활성화합니다.
  dev: !production,
  // Svelte 컴포넌트의 CSS를 별도 번들로 생성합니다.
  css: css => {
    css.write('bundle.css');
  },
  // 전처리 옵션을 지정합니다.
  preprocess: sveltePreprocess({
    scss: {
      // 전역에서 사용할 SCSS 파일을 지정합니다.
      // 단, style 태그에 lang="scss"가 지정되어 있어야 적용됩니다.
      prependData: '@import "./src/scss/main.scss";',
    },
    // PostCSS는 Autoprefixer를 설치하면 같이 설치됩니다.(9버전)
    // 10버전 이상은 postcss를 별도 설치해야 합니다.(npm i -D postcss)
    // Autoprefixer는 CSS에 자동으로 공급 업체 접두사(Vendor prefix)를 적용합니다.
    postcss: {
      plugins: [
        require('autoprefixer')()
      ]
    }
  })
};

다시 rollup.config.js 파일로 이동해서,
이제 필요하지 않은 다음 코드를 삭제합니다.

// external
import sveltePreprocess from 'svelte-preprocess';

rollup.config.js 중간 plugins 옵션의 svelte 함수만 다음과 같이 수정하세요.

  // 번들이 생성되는 경로입니다.
  file: 'public/build/bundle.js'
},
plugins: [
  svelte(require('./svelte.config.js')),

  // replace ~ builtins 까지는 다음과 같은 순서대로 작성해야 정상적으로 동작함에 주의합니다!
  // 대부분의 플러그인은 Rollup 측에서 제공하는 것이 아니기 때문에,

'모두 저장'하시고 VS Code를 재부팅하시면 해결될 것으로 봅니다.

만약 위와 같은 방법으로도 해결되지 않으시면, 원격 제어로 해결해 드리겠습니다.

확인해 보시고 결과 알려주시면 감사드려요 :D

생각하지 못했던 부분에 문제가 있었네요.

제가 좋은 정보 얻어가네요!

문제를 해결하셔서 다행입니다!

즐거운 주말 보내세요 :D

해결했습니다.

원인은 vscode 설정에 "files.associations": {"*.svelte": "html" } 요런 내용이 들어가 있어서 문제가 된것입니다.

주말임에도 상세하게 답변 주셔서 감사합니다.