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

虽然我尝试使用导入来使用它，但仍然出现错误

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

如您所见，导入命令确实有效，但显示错误，因为它试图在 vendor.css 中找到资源，但找不到它们

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

Answer 2

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

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

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

Answer 3

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

如果您想将此 css 文件附加到 header，您可以使用 vue 文件的 mounted() 功能来完成。请参阅示例。
注意：假设您可以在浏览器中以http://www.yoursite/assets/styles/vendor.css访问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 5

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

<template>
</template>

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

export default {}
</script>

<style>
</style>

Answer 6

main.js

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

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

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

dev.css

body{
    font-size: 24px;
}

Answer 7

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

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

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

如何在 Vue 2 中包含 css 个文件

How to include css files in Vue 2

webpack

vue.js

webpack-dev-server

vuejs2