使用less作为样式工具,如果引入全局样式,那么例如:
引入 reset.less,默认样式不包含reset,并且部分用户自己有一套reset样式,因此需要在App.vue进行手动引入

<style lang="less">
@import 'src/styles/reset.less';
</style>

但是使用less的一大优势是使用变量来定义不同的值,然后进行全局的调用使用
可以在每个文件都用<style></style> 里进行分别引用,使用是可以使用,但是build后会出现很多个该文件的样式,造成极大的冗余。
也许你会想当然的把带变量的样式页面放在App.vue或其他vue页面里想要统一使用,然而vue在build的时候根本就找不到你定义的变量,因为我用的vux组件库,所以,在这我就说说用vux来进行的解决方案吧

根据vux的使用要求,我对项目进行了手动配置,配置过程基本如下:

初始化基本的vue项目(网上有很多帖子,这里就不再赘述)之后,

安装vux

npm install vux --save

安装 less-loader

npm install less less-loader --save-dev

安装vux-loader

npm install vux-loader --save-dev

vux-loader工具的作用是对.vue代码进行预处理,不限于 vux 组件库。

它是针对webpack+vue-loader项目的工程化工具,简化了webpack插件和loader的使用和编写,支持在vue-loader处理之前进行预处理,同时内置对vux组件专用的配置和优化插件。

下面配置vux-loader

引入vux-loader

const vuxLoader = require('vux-loader')

build/webpack.base.conf.js 文件中,将整个module.export的内容赋给一个变量,比如originalConfig
这里写图片描述
然后在该文件的最下方如下配置:

这里写图片描述

代码如下:

const webpackConfig = originalConfig; // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {

  options: {},
  plugins: [
    {name: 'vux-ui'},
    {name: 'less-theme', path: 'src/common/less/theme.less'},
    {name: 'duplicate-style'}
  ]
})

上图中的theme.less既是有全局变量的文件,到此配置完成!!
下面来看效果:

这里写图片描述

这里写图片描述

 <p class="font">项目</p>

这里写图片描述

如有更好的解决方案或不妥之处,还请留言共同探讨~~

Logo

前往低代码交流专区

更多推荐