在vue中引入less步骤
- 下载依赖
npm install less less-loader --save-dev
- 引入
安装完成后打开 build目录,修改 webpack.base.conf.js 中的相关配置:
在 module.exports 中找到 module 中的 rules 数组
module.exports = {
...
...
module: {
rules: [
{...},
{...},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}
]
}
- 在组件中引用
<style scoped lang="less">
/* 样式代码 */
</style>
报错TypeError: loaderContext.getResolve is not a function
这很有可能是less-loader版本过高导致的,解决方法如下:
卸载现有less-loader
npm uninstall less-loader
再重新安装低版本的less-loader
npm install less-loader@4.1.0 --save-dev