vue在webpack项目中使用less

下载webpack项目

vue init webpack demo

安装less模块

两个都要下载

npm i less@3.0.0 --save-dev
npm i less-loader@4.1.0 --save

修改配置文件

在项目中找到build文件夹按照一下路径添加配置文件

build --> webpack.base.conf.js --> module(对象) --> rules(数组) --> 添加less配置文件

{
   test: /\.less$/,
   use: [
     "style-loader", 
     "css-loader", 
     {
       loader: "less-loader"
     }
   ]
}

在页面中使用

记得要在style标签里写lang属性，scoped表示样式只在当前页面起作用

<style lang="less" scoped>
 #app {
   h2{
     background-color: red;
   }
 }
</style>