如何在 Vue 2 中包含 css 文件答案

【问题标题】：How to include css files in Vue 2如何在 Vue 2 中包含 css 文件
【发布时间】：2017-10-02 17:03:58
【问题描述】：

我是 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 }
 })

这是错误截图：

帮我解决这个问题。

【问题讨论】：

你从哪里安装 vue webpack？主题模板从何而来？你用的是什么编辑器？
@user1585345 我通过vue-cli 安装了vue，我们有一个html template，它在css 文件中有样式表。我正在为WebStorm编辑工作

标签： webpack vue.js vuejs2 webpack-dev-server

【解决方案1】：

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

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

【讨论】：

我尝试放入index.html，但没有找到，我尝试了<link rel='stylesheet' href="./src/assets/styles/vendor.css">，但无法找到。我试过./assets/styles/vendor.css我无法得到

【解决方案2】：

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

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

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

【讨论】：

这非常有效。我还让它在index.js 文件中导入样式，如下所示：import '@/assets/css/styles.css。生产生成的css文件似乎是一样的。我想知道哪种解决方案更好......
如果您在 .vue 中的样式标签内导入 css，您可以使其作用域并仅应用特定组件中的样式。这是您可以做的另一件事，但我也不太确定哪种解决方案更好。
@GeraldineGolong 您好，感谢您的回复，抱歉之前没有提及，这是路径问题，我需要在源代码之前使用@ 符号并且它有效。使用 vue-clie v3。
@GeraldineGolong 您好，感谢您的回复，抱歉之前没有提及，这是路径问题，我需要在源代码之前使用 @ 符号并且它有效。使用 vue-clie v3。
@gedii 不得不说，这个修复让我很开心！！想分享爱

【解决方案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>

【讨论】：

require('...') 去哪儿了？它是在组件文件中还是在 main.js 或 app.vue 中？ main.js 中有 import Vue from 'vue' 谢谢
require('...') 进入你的 main.js 文件。记住那些是你的'main.css'样式。表示您希望在任何地方使用的样式。

【解决方案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);
    }

【讨论】：

【解决方案5】：

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

<template>
</template>

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

export default {}
</script>

<style>
</style>

【讨论】：

【解决方案6】：

main.js

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

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

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

dev.css

body{
    font-size: 24px;
}

【讨论】：

【解决方案7】：

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

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

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

【讨论】：