vue文件中 css样式怎么 独立出一个单文件

html-css014

vue文件中 css样式怎么 独立出一个单文件,第1张

vue文件中 css样式怎么 独立出一个单文件

<template>

<div>...</div>

</template>

<script lang='coffee'>

a = 123

</script>

<style lang='less'>

a {

display: none

}

</style>

vue-loader 后 会把style 样式通过打包后的js文件 添加到 页面

vue: {

css: ExtractTextPlugin.extract("css"),

less: ExtractTextPlugin.extract("css!less-loader")

},

<template>

<div id="app" >

</div>

</template>

<script>

export default {

name: 'MainPage',

data () {

return {

}

}

按需组件引入吧,这样会减少不必要的css,当然你每个组件的css要独立出来,而且如果使用webpack 的vue-loader处理 即使重复引用同一个组件css也是同用一份,不会额外的复制多个