如何在 Vue 2中包含 css 文件

我是新来的，正在努力学习。我在系统中安装了新版本的 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 }
})

Here is the error screenshot: Error message

帮帮我。

237446 次浏览
小开

正如您所看到的，import 命令确实起作用了，但是出现了错误，因为它试图定位 vendor.css 中的资源，但是找不到它们

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

小开
最佳答案

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

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

另外，如果需要的话，请确保安装了正确的加载程序。

小开

Try using the @ symbol before the url string. Import your css in the following manner:

import Vue from 'vue'


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

在 App.vue 文件中，您可以这样做来导入 style 标记中的 css 文件

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


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

如果你想把这个 css文件附加到 header，你可以使用 vue 文件的 mounted()函数。看看这个例子。
Note: Assume you can access the css file as http://www.yoursite/assets/styles/vendor.css in the browser.

mounted() {
let style = document.createElement('link');
style.type = "text/css";
style.rel = "stylesheet";
style.href = '/assets/styles/vendor.css';
document.head.appendChild(style);
}
小开

可以在脚本标记中的组件上导入 CSS 文件

<template>
</template>


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


export default {}
</script>


<style>
</style>
小开

主要的

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

Css ——可以导入多个文件。

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

Dev.css

body{
font-size: 24px;
}
小开

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

You can have multiple scss/css files which you can import in this main/styles.css file inside your asset folder. You can import fonts from CDN inside this main css file.

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


提交答案