如何在 Vue 2 中包含 css 文件

Question

我是 vue js 的新手，并试图学习这一点。我在我的系统中安装了一个全新版本的 vue webpack。我有一个 css、js 和这个主题模板的图像，我想将其包含到 HTML 中，所以我尝试将它添加到 index.html 但我可以在控制台中看到错误并且资产没有被添加.当我搜索时，我知道我可以在 main.js 文件中使用 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 }
 })

虽然我尝试使用 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 }
 })

这是错误截图：

帮我解决这个问题。

原文由 Nitish Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在样式标签内的 App.vue 上导入 css 文件。

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

此外，如果需要，请确保安装了正确的加载器。

原文由 gedii 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

尝试在 url 字符串之前使用 @ 符号。通过以下方式导入您的 css：

 import Vue from 'vue'

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

在您的 App.vue 文件中，您可以这样做以在样式标签中导入 css 文件

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

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

原文由 Sir Waithaka 发布，翻译遵循 CC BY-SA 3.0 许可协议