关于vue公共样式的小小探究

很早之前就发现自己的所有vue项目里都有样式重复问题,如下图所示,最近刚好有空就花时间探究了一下,发现还是自己太年轻了

先说结论,自己错误的使用了vite的css预处理器配置项preprocessorOptions.additionalData,自以为这个就是用来引入公共样式的,看了官网描述才觉大错特错

 css: {
    preprocessorOptions: {
      // 引入公用的样式
      less: {
        modifyVars: {
          "primary-color": "#0F71E1",
        },
        additionalData: `@import "@/assets/style/common.less";`,
      },
    },
  },

简单来说,就是这个配置项是用来引入css预处理器公共样式变量的,而不是公共样式的,vite会将这个公共样式文件注入到每一个使用了css预处理器(这里义less为例)的页面页面及组件,其中的变量会被替换"消失",而普通样式会转换成css保留下来, 从而导致所有生成的样式表里都出现了这些公共重复,了解了这一原理,我们就很好解决开头的问题了

1. 将公共样式文件common.less里面的变量提取到variable.less

2. 在main.js引入common.less, vite.config做如下修改

 css: {
    preprocessorOptions: {
        modifyVars: {
          "primary-color": "#0F71E1",
        },
        additionalData: `@import "@/assets/style/variable.less";`,
      },
    },
  },

最后提醒自己,官方文档还是要多研究一下