在vue中使用less

首先vue環境搭建成功

第一步：

　　安裝 less 和less-loader

安裝less依賴：npm install less less-loader --save

第二步：

　　修改webpack.base.config.js文件，配置loader加載依賴，讓其支持外部的less,在原來的代碼上添加

// 此種方法在控制台中標簽樣式顯示的是style標簽樣式
{ 
    test: /\.less$/,

    loader: "style-loader!css-loader!less-loader",

},

    // 可以在控制台中看到當前標簽樣式來自於哪個less文件

{ 
    test: /\.less$/, loader: "style-loader!css-loader!less-loader", 　　
　　 options: { sourceMap: true }
 }

 

第三步：

在vue文件中的style標簽中添加lang="less"即可在標簽中使用less，或者外部引入less