Vue脚手架工程化安装less和相关配置

（1）安装less和less-loader 打开npm输入: 打开项目文件查看 package.json查看是否安装成功（2）添加less相关配置 build/webpack.base.conf.js配置在build/webpack.base.conf.js文...

（1）安装less和less-loader

打开npm输入:

打开项目文件查看 package.json查看是否安装成功

（2）添加less相关配置

build/webpack.base.conf.js配置

在build/webpack.base.conf.js文件下找到rules数组，加入配置

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

（3）代码中的style标签中加上 lang="less"即可

为了确保安装成功可以重新启动一次项目

（4）在语法中加入JS语句报错解决办法

配置JS，启动内联JavaScript

打开build/utils.js进行配置修改less 的配置

添加：{ javascriptEnabled: true }，然后重新启动项目即可

node.js编译less文件

根目录下新建一个文件夹，取名test，文件目录结构如下：（如果有test则直接创建less文件夹）

在test.less文件里面随意写些代码

打开命令行cmd，进入less_test文件夹，输入：cnpm install -g less，完成全局安装less编译模块

编译指令

全局安装less编译模块后再次输入编译指令

这里将less下的test.less编译打包到css文件夹下，命名为test.css

然后打开test.css会发现刚刚在test.less文件中写的代码已经被编译

这个是之前在test.less文件中写的css代码

这个是编译后的

0 条评论