vue 使用 less及相关配置

最新推荐文章于 2023-09-21 17:50:25 发布

你又啷个了嘛

最新推荐文章于 2023-09-21 17:50:25 发布

阅读量730

点赞数

分类专栏： vue.js 文章标签： vue less

本文链接：https://blog.csdn.net/wenqiang_wang_/article/details/90293718

版权

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

摘要由CSDN通过智能技术生成

安装相关依赖【基于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 文件里的配置项