less开发环境安装

328 阅读1分钟

默认有安装webpack/vue-cli和npm

全局安装【win+R cmd】

安装less依赖

npm install less less-loader --save

在项目文件夹/build/webpack.base.conf.js

module: {
    rules: [

内部添加

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

退回到项目文件夹

shift+右键开启powershell

安装less

npm i less --save-dev

安装less-loader

npm install less-loader --dev

npm install css-loader,style-loader --save-dev

在vue组件的style标签中加入

<style lang=”less”>

@import './index.less'; //引入全局less文件

<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less">
<script src="文件路径/less.js" type="text/javascript"></script>