如何在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

尝试在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>

Answer 3

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

<template>
</template>

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

export default {}
</script>

<style>
</style>

Answer 4

正如您所看到的，import命令确实有效但显示错误，因为它试图找到vendor.css中的资源但找不到它们

您还应该上传项目结构并确保没有任何路径问题。此外，您可以在index.html或组件模板中包含css文件，webpack加载器将在构建时提取它

Answer 5

如果要将此css文件附加到header，则可以使用vue文件的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);
    }

Answer 6

ma​​in.js

colnames(df1) = c(paste0('col',1:ncol(df1)))

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

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

dev.css

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

Answer 7

有多种方法可以在 vue 应用程序中包含 css 文件。我更喜欢的方式是在 vue 应用程序的 main.js 文件中导入单个 css 文件。

您可以有多个 scss/css 文件，您可以在资产文件夹内的 main/styles.css 文件中导入这些文件。您可以在此主 css 文件中从 CDN 导入字体。

另一种方式当然是在你的 vue 组件中使用 style 标签