vue 使用 less及相关配置

最新推荐文章于 2025-06-14 15:03:11 发布

原创最新推荐文章于 2025-06-14 15:03:11 发布 · 785 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #less

vue.js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在Vue项目中如何安装和配置Less，以及在webpack.config.js中修改rules加载Less依赖。通过引入Less文件，可以使用预定义的配置项如@config-color。同时提供了一个备选方案，引入自定义的theme.less文件进行主题定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装相关依赖【基于vux】组件

// 安装 vux
npm install vux --save

// 安装 less-loader
npm install less less-loader --save

// 安装vux-loader 对.vue代码进行预处理，使其不限于 vux 组件库
npm install vux-loader --save-dev

修改webpack.config.js文件

配置 rules里面的 loader加载依赖，让其支持外部的less,在原来的代码上添加

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

并且引入vux-loader，修改其如下，这里的 theme.less 就是自己的less文件

const vuxLoader = require('vux-loader');

const webpackConfig = {···} // 里面代码保持不变

module.exports = vuxLoader.merge(webpackConfig, {
  // plugins: ['vux-ui']
  plugins: [
    {name:'vux-ui'},
    {name:'less-theme',path:'../src/assets/theme.less'},
    {name: 'duplicate-style'}
  ]
});

使用，这里的 @config-color；就是 less 文件里的配置项

<style scoped lang="less">

.index{
    color: @config-color;
}

</style>

备用方案

// 安装 sass-resources-loader  其作用是在组件中使用全局变量

npm i sass-resources-loader --save-dev


// 修改其 build/utils.js

将  less: generateLoaders('less') 改为

less: generateLoaders('less').concat({
   loader: 'sass-resources-loader',
   options: {
     resources: path.resolve(__dirname, '../src/assets/theme.less')
   }
})

同样，这里的 theme.less 为自己的 less 文件