vue 怎么require css文件

html-css011

vue 怎么require css文件,第1张

首先,引入公共样式时,我们在“main.js”里使用AMD的方式引入,即

?

1require('./assets/css/main.less')

require(http://r.yuzhua.com)

这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析

这时,我们要填写上依赖,

?

1require('!style!css!less!./assets/css/main.less')

在很多以前的博客里都是以上写法,这个是Vue 2.0刚开始的,现在使用会报错;下面是正确写法

?

1require('!style-loader!css-loader!less-loader!./assets/css/main.less')

在以前配置到这里,就万事大吉了,也可以开始引入css文件了,然后现在到这里还会报错

当出现以上错误时,说明你的项目里缺少依赖;

?

1npm install style-loader --save

这时你就可以引入css文件了;

按需加载,可样式是写在.vue模板中的,访问另一个页面样式就会追加到head标签中,访问的越多head标签的style标签也就越多,即便style标签加入scoped可以避免样式冲突:

后来我查了下有使用extract-text-webpack-plugin将css提取合并的。

这个代码:

import 'xx.css' or require('xx.css')

在vue中导入自定义的css文件或js文件

css文件

在main.js中导入公共的css

import '../static/css/common.css' //引入公用css

在页面中引入单独css

<style scoped>

@import '../../static/css/header.css'

</style>

Js文件

自定义js 中写:

function title(t){

alert(t)

}

export {

title //多个方法在此处json中export出去

}

页面中使用:

<template>

<div>

<button class="btn" @click="clickme">click me</button>

</div>

</template>

<script>

import {title} from './js/common.js' //可以选择需要的方法引入

export default {

data(){

return{

}

},

methods:{

clickme(){

title('你点我了')

}

}

}

</script>

或者

import Comjs from './js/common.js' //引入公用js

Vue.prototype.$comjs = Comjs//添加到vue属性中

自定义js 中写:

const comjs = {

}

comjs.title = function (title) {

alert(title)

}

export default comjs

页面中使用:

<template>

<div>

<button class="btn" @click="clickme">click me</button>

</div>

</template>

<script>

export default {

data(){

return{

}

},

methods:{

clickme(){

this.$comjs.title('你点我了')

}

}

}

</script>