vue项目安装less

npm install less less-loader --save-dev

等待安装成功即可,接下里我们可以在vue项目中的package.json中看到less的相关依赖

"less": "^4.1.2",
"less-loader": "^10.2.0",

接下来找到bulid目录下的webpack.base.conf.js并打开,找到module下的rules写下

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

遇到问题

Module build failed: TypeError: loaderContext.getResolve is not a function,
这个问题是因为less-loader的版本太高了,导致错误,最好装5.0.0的,而且要重新npm run 不然也是一直报错,搞了半天才发现。

以上步骤全部走完,接下来,我们可以打开组件文件在下面style标签里面写上lang="less"表示以less语法解析css。

Logo

前往低代码交流专区

更多推荐