您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

webpack解析less

发布时间：2020-04-04 12:05:45编辑：雪饮阅读（）

 

依赖

npm install less-loader less

webpack.dev.config.js

module.exports = {
   entry:{"main":'./main.js'},
   output:{filename:'./build.js'},
   watch:true,
   module:{
      loaders:[
         {
            test:/\.css$/,
            loader:'style-loader!css-loader'
         },
         {
            test:/\.(jpg|png|jpeg|gif|svg)$/,
            loader:'url-loader'
         },
         {
            test:/\.less$/,
            loader:'style-loader!css-loader!less-loader'
         }

      ]
   }
}

main.js

import './main.less'
 import Vue from './vue.js'
 import App  from './App.js'
 new Vue({
     el:'#app',
     components:{
         App:App
     },
     template:'<App/>'
 })

main.less

@imgPath : './7.jpg';
 body{
    background-image:url(@imgPath);
 }