编写的时候用预编译语言编写样式会比较方便。我尝试过两种:stylus, scss(目前是在用这个)
stylus~学习教程: 张鑫旭老师的stylus教程~
sass~学习资料见sass中文网
如何配置?下边两个选一个预编译工具安装就好。
sass
需要安装 node-sass 以及 sass-loader
node-sass 我每次 npm 安装都会失败,这时候,用淘宝镜像安装就可以了:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install node-sass --save-dev
安装成功后再安装 sass-loader
$ npm install sass-loader --save
stylus
则需要安装 stylus,stylus-loader
<template>
<div>我是模板内容</div>
</template>
<script>
export default{}
</script>
<style lang="stylus" rel="stylesheet/stylus"> // stylus 预编译
</style>
// <style lang="scss"> // scss 预编译
// </style>
使用scoped属性可以将样式只应用于当前组件中
<template>
</template>
<script>
</script>
<style scoped>
</style>
网友评论