如何在Vue 2中包含css文件

Question

我是vue js的新手,并试图学习这个.我在我的系统中安装了一个全新的vue webpack版本.我有一个css,js和这个主题模板的图像,我想要包含在HTML中,所以我尝试添加它,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 }
 })

这是错误截图:

帮助我解决这个问题.

Answer 1

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

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

此外,如果您需要,请确保安装了正确的装载器.

Answer 2

您可以在 script 标签内的组件上导入 CSS 文件

<template>
</template>

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

export default {}
</script>

<style>
</style>

Answer 3

尝试@在网址字符串之前使用符号。通过以下方式导入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>

Answer 4

main.js

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

style.css——您可以导入多个文件。

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

开发文件

body{
    font-size: 24px;
}

Answer 5

如果您想附加此css文件，可以使用vue 文件的功能header来完成。mounted()请参阅示例。
注意：假设您可以像在浏览器中一样访问该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);
    }