如何在 Vue 2 中包含 css 文件 [英] How to include css files in Vue 2

问题描述

我是 vue js 的新手，正在尝试学习这个.我在我的系统中安装了一个全新版本的 vue webpack.我有一个主题模板的 css、js 和图像，我想将其包含到 HTML 中，因此我尝试将其添加到 index.html 中，但我可以在控制台中看到错误，并且资产是没有被添加.当我搜索时，我知道我可以在 main.js 文件中使用 require .但我收到错误:

I'm new to vue js and trying to learn this. I installed a fresh new version of vue webpack in my system. I'm having a css, js and images of this a theme template which I want to include into the HTML so i tried adding it in index.html but I can see errors in console and the assets are not being added. While I searched I came to know that I can use require in main.js file. But I'm getting the error:

以下我在我的 main.js 文件中尝试过:

Following I've tried in my main.js file:

// 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 来使用它，但仍然出现错误

While I tried using import to use it but still I got error

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

错误截图如下:

帮我解决这个问题.

推荐答案

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

You can import the css file on App.vue, inside the style tag.

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

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

Also, make sure you have the right loaders installed, if you need any.

这篇关于如何在 Vue 2 中包含 css 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！