vue.js에서 "일반적인 방법"을 사용하려면 어떻게 해야 합니까?

vue.js에서 "일반적인 방법"을 사용하려면 어떻게 해야 합니까?

지금까지 Grunt와 함께 sass를 사용해 왔고, 그 결과 x.scss 파일을 style.css로 컴파일했습니다.

저는 React에서 프로젝트를 한 번밖에 하지 않았고 Vue.js와 작업하는 것은 처음이기 때문에 몇 가지 이해하려고 합니다.

CSS 스타일링을 Vue 컴포넌트와 같은 파일에 포함시키고 싶을 때는 간단하게 사용할 수 있습니다.

<style lang="sass">
   @import '_card.scss'
  // Custom CSS code here
</style>

제가 알기로는 Vue는 모든 .vue 파일에서 모든 스타일링을 가져와 style.css로 컴파일합니다.잘 모르니까 이렇게 물어봐요.

1. Vue 컴포넌트는 런타임에 호출됩니까?즉, 스타일링의 특정 부분을 컴파일하는 것이 아니라 모든 스타일링을 하나의 파일로 로드하는 것을 의미합니까?

2. Vue 컴포넌트 파일에 스타일링을 넣는 것은 그다지 좋아하지 않습니다.글로벌 스타일을 로드하려면 어떻게 해야 합니까?내 기억이 맞다면 각 React 컴포넌트에 css 파일을 로드해야 하는데 요점이 뭔지 모르겠어요.헤더에 스타일을 로드하고 싶을 뿐입니다.

Vue 매뉴얼:컴포넌트 CSS 추출

싱글 파일 컴포넌트를 사용하는 경우 CSS 내부 컴포넌트는 JavaScript를 통해 태그로 동적으로 삽입됩니다.이 방법은 실행 시 비용이 적기 때문에 서버 측 렌더링을 사용하는 경우 "스타일링되지 않은 콘텐츠의 플래시"가 발생합니다.모든 컴포넌트에 걸친 CSS를 같은 파일로 압축 해제하면 이러한 문제가 회피되고 CSS의 최소화와 캐싱이 향상됩니다.그 방법에 대해서는, 각 빌드 툴의 메뉴얼을 참조해 주세요.

• Webpack + vue-loader(vue-cli 웹 팩템플릿에는 이 설정이 되어 있습니다)
• Browserify + vueify
• 롤업 + 롤업 플러그 인 vue

첫 번째 질문에 대한 답변: "... 스타일링의 특정 부분이 한 파일에 로드되는 대신 컴파일됩니다."

프로젝트의 설정 방법에 따라 다릅니다.웹 팩 템플릿과 함께 빌드된 경우 이러한 스타일을 결합해야 합니다(단, 스코프로 지정되어 있는 경우 원래 컴포넌트의 프리픽스가 부가됩니다).

두 번째 질문:스타일을 전체적으로 로드하려면 이미 가지고 있는 코드를 앱에 추가하면 됩니다.표시하다

<style lang="sass">
   @import '_card.scss'
</style>

언급URL : https://stackoverflow.com/questions/45623375/how-do-i-use-sass-the-normal-way-with-vue-js