Vue 2.6.11 版本 的vue.config.js中加入less-laoder
时间: 2023-07-06 11:44:14 浏览: 406
如果你想在 Vue 2.6.11 中使用 `less-loader`,你需要先安装 `less-loader` 和 `less`:
```bash
npm install less-loader less --save-dev
```
然后,在你的 `vue.config.js` 中,可以通过 `configureWebpack` 对 webpack 配置进行修改,来加入对 `.less` 文件的处理。具体来说,你需要添加一个 `module` 配置项,指定如何处理 `.less` 文件:
```javascript
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
}
]
}
}
}
```
上述配置中,我们添加了一个针对 `.less` 文件的 loader 规则,使用了 `vue-style-loader`、`css-loader` 和 `less-loader`。其中 `vue-style-loader` 和 `css-loader` 用来处理样式文件,`less-loader` 用来将 `.less` 文件编译成 CSS 文件。
配置完成后,你就可以在 Vue 组件中使用 `.less` 文件了,例如:
```vue
<template>
<div class="hello">
Hello World
</div>
</template>
<style lang="less">
.hello {
background: red;
}
</style>
```
这样就可以在 Vue 项目中愉快地使用 Less 了。
阅读全文