logo标签列表

如何在Vue 2中引入CSS文件

webpackvue.jsvuejs2webpack-dev-server
123

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

这是错误屏幕截图：错误信息

请帮我解决这个问题。

你是从哪里安装的Vue Webpack？主题模板是从哪里来的？你正在使用什么编辑器？ - bbsimonbb
@user1585345 我通过 vue-cli 安装了 Vue，我们有一个包含 CSS 文件的 HTML 模板。我正在使用 WebStorm 编辑器工作。 - Nitish Kumar
7个回答
247

您可以在App.vue文件的style标签内引入CSS文件。

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

同时，确保您安装了适当的加载器（如果需要）。

11
这个方法很完美。我还让它在 index.js 文件中导入样式，像这样：import '@/assets/css/styles.css。生成的生产环境 CSS 文件看起来是一样的。我想知道哪种方案更好... - hmartos
2
如果您在.vue文件中的style标签中导入css，您可以将其设置为scoped，仅在特定组件中应用样式。这是一种不同的方法，但我也不确定哪种解决方案更好。 - gedii
2
@GeraldineGolong 你好，谢谢回复。之前没有提到，很抱歉，这是路径问题，我需要在源代码前使用 @ 符号，这样就可以了。我正在使用 vue-cli v3。 - Abdul Rehman
2
@GeraldineGolong 你好，谢谢回复。之前抱歉没有提到，这是路径问题，我需要在源代码前使用 @ 符号才可以工作。我正在使用 vue-cli v3。 - Abdul Rehman
2
@gedii，我必须说，这个修复让我的早晨变得美好了！！想要分享这份爱。 - ToddT
显示剩余5条评论
51
尝试在URL字符串之前使用@符号。以以下方式导入您的CSS：

尝试在URL字符串之前使用@符号。以以下方式导入您的CSS：

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>
1
require('...')应该放在哪里？是在组件文件中还是在main.js或app.vue中？main.js中有import Vue from 'vue'。谢谢。 - Shane G
2
require('...') 命令会跳转到你的 main.js 文件。请记住，这些是你的 'main.css' 样式，也就是你希望在任何地方使用的样式。 - Sir Waithaka
非常感谢。这是唯一一个真正起作用的解决方案。在其他方法中，它超越了组件并破坏了我的布局。 - Mithsew
12

你可以在组件内的脚本标签中导入CSS文件

<template>
</template>

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

export default {}
</script>

<style>
</style>
7

main.js

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

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

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

dev.css

body{
    font-size: 24px;
}
6

如果你想将这个 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);
    }
3

在您的 Vue 应用程序中，有多种包含 CSS 文件的方法。我喜欢的方式是在 main.js 文件中引入单个 CSS 文件来为您的 Vue 应用程序导入 CSS 样式。

您可以在 asset 文件夹内的 main/styles.css 文件中导入多个 SCSS/CSS 文件。您可以在此主要 CSS 文件中从 CDN 导入字体。

当然，另一种方法是在 Vue 组件中使用 style 标签。

2

正如您所看到的，导入命令确实起作用，但是显示错误，因为它尝试在vendor.css中定位资源，但找不到它们。

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

5
我尝试把文件放在 index.html 中，但找不到它。我尝试使用 <link rel='stylesheet' href="./src/assets/styles/vendor.css"> ，但仍然无法找到。我尝试了 ./assets/styles/vendor.css 也无法找到。 - Nitish Kumar
Webpack loader 的意思是像 <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> 这样的东西，这意味着在 webpack 编译后，favicon 将位于输出文件夹的根目录（通常为 dist）。你也可以用类似的方式处理 CSS（请参见 https://webpack.js.org/guides/asset-modules/），但我不建议这样做，因为这会将其硬编码到一个应该具有最小功能的模板中，而应该使用其他方法。 - MikeT
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接