首先,vue开发环境已经安装成功
一、如何使用less
1.安装less
npm install less less-loader --save
使用yarn
yarn add less
yarn add less-loader
2.修改build/webpack.base.config.js文件,配置loader加载模块
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
3.vue文件中style标签里加上lang=”less” ,<style scoped lang="less">
4.引用less
@import './index.less'; //例如引入全局less文件
结束!
二、main.js中全局使用less
应用场景:在使用一些组件时,需要修改组件的样式
需要添加 !style-loader!css-loader!less-loader!
import '!style-loader!css-loader!less-loader!./styles/index.less';
网友评论