Vue 2에 css 파일을 포함하는 방법

Vue 2에 css 파일을 포함하는 방법

나는 vue js에 처음 와서 이것을 배우려고 한다.시스템에 새 버전의 vue 웹 팩을 설치했습니다.HTML에 포함시키고 싶은 테마 템플릿의 css, js 및 이미지를 가지고 있기 때문에 에 추가해 보았습니다.index.html콘솔에 오류가 표시되며 자산이 추가되지 않습니다.검색하다가 알게 된 것은 이 기능을 사용할 수 있다는 것입니다.require에main.js파일입니다만, 다음의 에러가 표시됩니다.

내가 내 옷을 입어본 후main.js파일:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'

 require('./assets/styles/vendor.css');
 require('./assets/styles/main.css');
 require('./assets/scripts/vendor/modernizr.js');

 Vue.config.productionTip = false

 /* eslint-disable no-new */
 new Vue({
  el: '#app',
   router,
  template: '<App/>',
  components: { App }
 })

Import를 사용하여 사용하려고 했지만 오류가 발생했습니다.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'

 import('./assets/styles/vendor.css')
 // require('./assets/styles/vendor.css');
 // require('./assets/styles/main.css');
 // require('./assets/scripts/vendor/modernizr.js');

 Vue.config.productionTip = false

 /* eslint-disable no-new */
 new Vue({
  el: '#app',
   router,
  template: '<App/>',
  components: { App }
 })

에러 스크린샷을 다음에 나타냅니다.

나 좀 도와줘.

스타일 태그 내의 App.vue에서 css 파일을 가져올 수 있습니다.

<style>
  @import './assets/styles/yourstyles.css';
</style>

또한 필요한 경우 올바른 로더가 설치되어 있는지 확인하십시오.

를 사용해 보세요.@url 문자열 앞에 기호가 표시됩니다.다음 방법으로 css를 Import합니다.

import Vue from 'vue'

require('@/assets/styles/main.css')

App.vue 파일에서 이를 통해 스타일 태그의 css 파일을 가져올 수 있습니다.

<template>
  <div>
  </div>
</template>

<style scoped src="@/assets/styles/mystyles.css">
</style>

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

<template>
</template>

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

export default {}
</script>

<style>
</style>

main.discloss.main.discloss.

import "./assets/css/style.css"

style.css - 여러 파일을 가져올 수 있습니다.

@import './dev.css';
body{
    color: red
}

개발.css

body{
    font-size: 24px;
}

추가하시려면css까지 줄서다.header를 사용하여 할 수 있습니다.mounted()vue 파일의 기능.예를 참조해 주세요.
주의: 에 액세스 할 수 있다고 가정합니다.css로서 제출하다.http://www.yoursite/assets/styles/vendor.css브라우저에 표시됩니다.

mounted() {
        let style = document.createElement('link');
        style.type = "text/css";
        style.rel = "stylesheet";
        style.href = '/assets/styles/vendor.css';
        document.head.appendChild(style);
    }

보시는 바와 같이 Import 명령어는 동작했지만 vendor.css에서 리소스를 검색하려고 했지만 찾을 수 없었기 때문에 오류가 발생하고 있습니다.

또한 프로젝트 구조를 업로드하고 경로에 문제가 없는지 확인해야 합니다.또한 css 파일을 index.html에 포함하거나 컴포넌트 템플릿과 웹 팩로더가 빌드 시 압축을 풀 수도 있습니다.

vue 앱에 css 파일을 포함하는 방법은 여러 가지가 있습니다.vue 앱의 main.js 파일 내에 하나의 css 파일을 Import하는 것이 좋습니다.

자산 폴더 내에 이 main/styles.css 파일로 Import할 수 있는 scss/css 파일을 여러 개 포함할 수 있습니다.이 메인 css 파일 내의 CDN에서 글꼴을 Import할 수 있습니다.

다른 방법은 물론 vue 컴포넌트 내에서 스타일 태그를 사용하는 것입니다.

언급URL : https://stackoverflow.com/questions/43784202/how-to-include-css-files-in-vue-2