一、使用less
第一步当然是先安装依赖啦
npm install less less-loader --save
第二步修改webpack.config.js文件,配置loader加载依赖,让其支持外部的less,添加
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
第三步大家就可以愉快的使用了
<template>
<div>
</div>
</template>
<script>
export default{
}
</script>
<style lang="less" scoped>
</style>
注:"scoped" 代表<style>标签下的代码只对本页面有效
二、使用stylus
第一步当然也是先安装loader啦
cnpm i stylus-loader -g //可以先将stylus-loader全局安装
安装完loader你会发现使用了stylus项目还是无法启动
第二步将stylus安装到你的项目里
cnpm i stylus stylus-loader --save-dev
第三步你就可以使用啦
<style lang="stylus">
#app
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
.main
float:left;
height:100%;
overflow: hidden;
width:95%;
</style>
参考链接:http://lesscss.cn/