단일 vue 컴포넌트에 로컬 CSS 파일 포함

단일 vue 컴포넌트에 로컬 CSS 파일 포함

Laravel vue SPA를 구축하고 있습니까?로컬 CSS 파일을 1개의 vue 컴포넌트에만 포함하는 방법을 알아야 합니다.

를 사용할 수 있습니다.@import을 통해 입수할 수 있다scss다음과 같이 합니다.

<style lang="scss" scoped>
  @import '../css/mycss.scss'; /* injected */
  @import '../css/mycss.css'; /* will use url import (do not use)*/
</style>

이를 위해 다음 항목을 추가해야 할 수 있습니다.node-sass웹 팩 구성이 아직 없는 경우 종속성을 확인하고 설정을 조정합니다.Vue CLI에서 생성된 프로젝트를 사용하는 경우 이미 포함되어 있을 수 있습니다.

css 의 스코프를 설정하려면 , 내선 번호의 이름을 다음과 같이 변경할 필요가 있습니다..scss이렇게 하면 vue-timeout에 의해 처리됩니다.Import.css파일은 같은 방법으로 동작하지 않고 URL Import로 취급됩니다.

스크립트 태그 내의 컴포넌트에 CSS 파일을 Import 할 수 있습니다.

이 방법은 효과가 있었습니다.

<template>
</template>

<script>
import "@/assets/<file-name>.css";

export default {}
</script>

언급URL : https://stackoverflow.com/questions/53834650/include-local-css-files-in-a-single-vue-component