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

我是vue js的新手，正在努力学习这一点。我在系统中安装了新版本的vue webpack。我有一个css、js和这一主题模板的图像，我想将其包含在HTML中，所以我尝试在

index.HTML

中添加它，但我可以在控制台中看到错误，并且没有添加资产。当我搜索时，我知道我可以在

main.js

文件中使用

require

。但我得到了一个错误：

以下是我在

main.js

文件中尝试的内容：

//要使用“import”命令加载的Vue生成版本
//（仅限运行时或单机版）已在webpack.base.conf中使用别名设置。
从“Vue”导入Vue
从“./App”导入应用程序
从“./路由器”导入路由器
要求（“./assets/styles/vendor.css”）；
要求（'./assets/styles/main.css'）；
要求（“./assets/scripts/vendor/modernizer.js”）；
Vue.config.productionTip=false
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
路由器，
模板：'

请帮我解决这个问题。
如您所见，import命令确实有效，但显示错误，因为它试图在vendor.css中找到资源，但找不到它们

您还应该上载项目结构并确保没有任何路径问题。此外，您可以在index.html中包含css文件，或者组件模板和网页包加载器在构建时将其提取出来。
您可以在App.vue上的样式标记内导入css文件


@导入“./assets/styles/yourstyles.css”；

此外，如果需要，请确保安装了正确的加载程序。
尝试在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>

如果要将此
css
文件附加到
标题
中，可以使用vue文件的
mounted（）
函数来完成。请参见示例。

注意：假设您可以作为
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);
    }

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

<template>
</template>

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

export default {}
</script>

<style>
</style>


导入“@/assets/.css”；
导出默认值{}
main.js

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

body{
    font-size: 24px;
}

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

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

dev.css

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

body{
    font-size: 24px;
}

您是从哪里安装vue webpack的？主题模板来自哪里？您使用的编辑器是什么？@user1585345我通过
vue cli
安装了vue。我们有一个
html模板
，在css文件中有样式表。我正在开发
WebStorm
editorI尝试放入
index.html
但是它没有找到，我尝试了
，但找不到。我尝试了
/assets/styles/vendor.css
我无法完美地完成这项工作。我还让它在
index.js
文件中导入样式，如下所示：
导入'@/assets/css/styles.css
。生产生成的css文件似乎是相同的。我想知道什么解决方案更好…如果您将css导入.vue中的一个样式标记中，您可以将其限定范围并仅应用于特定组件中的样式。这是您可以做的另一件事，但我也不确定哪种解决方案更好。@GeraldineGolong您好，感谢您的回复，很抱歉之前没有提及，这是路径问题，我需要向我们咨询e
@
在源代码之前签名，然后它就开始工作了。使用vue clie v3。@GeraldineGolong嗨，谢谢你的回复，很抱歉之前没有提到，这是路径问题，我需要在源代码之前使用@sign，然后它就开始工作了。使用vue clie v3。@gedii不得不说，这个修复程序让我度过了一个早上！！想分享爱，需要在哪里（“…”）go？是在组件文件中，还是在main.js或app.vue中？main.js中有从“vue”导入vue的命令（“…”）会转到main.js文件。请记住这些是“main.css”样式。这意味着您希望在任何地方使用的样式。