Как включить css-файлы в Vue 2

Я новичок в vue js и пытаюсь этому научиться. Я установил новую версию Vue webpack в своей системе. У меня есть css, js и изображения этого шаблона темы, который я хочу включить в HTML, поэтому я попытался добавить его в index.html но я вижу ошибки в консоли и активы не добавил. Пока я искал, я узнал, что могу использовать require на . Но я получаю ошибку:

после того, как я попробовал в моем 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 }
 })

в то время как я пытался использовать импорт, чтобы использовать его, но все же я получил ошибку

// 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 }
 })

вот скриншот ошибки: Error message

помогите мне в этом.

8
vue.js vuejs2 webpack webpack-dev-server

3 ответов

вы можете импортировать файл css в приложение.vue, внутри тега стиля.

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

кроме того, убедитесь, что у вас установлены правильные загрузчики, если вам нужны.

24

попробуйте использовать @ символ перед строкой url. Импортируйте css следующим образом:

import Vue from 'vue'

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

в вашем приложении.Vue файл вы можете сделать это, чтобы импортировать файл css в теге стиля

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

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

Как вы можете видеть, команда импорта действительно работала, но показывает ошибки, потому что она пыталась найти ресурсы в поставщике.css и не смог их найти

вы также должны загрузить структуру проекта и убедиться, что нет никаких проблем пути. Кроме того, вы можете включить файл css в индекс.html или шаблон компонента и загрузчик webpack извлекут его при построении

0