css公共样式能更高效，为啥不抽公共样式呢？

Posted 2023-05-16

这个要看具体情况的，需要看场景来抽公共的。
比如：常见的抽公共是以模块为单位的集合，比如按钮、布局类的（如栅格布局flex）等，能经常用到的模块。
那如果所有属性都抽公共的话，会导致html页面里class的值太多，比如color属性抽一个，font抽一个，padding抽一个等。会使得class值太长，从而导致html页面的大小变大，同样会不利于页面的加载。
所以最好适中，把常用的抽公共，比较独立的就单独写样式。 参考技术A 公共样式更高效的同时也会带来高耦合，看具体项目而定，抽不抽吧！

vue项目引入公共样式less文件

参考技术A 1、公共样式文件

2、引入方式

（1）局部引入

（2）全局引入

       a.需要安装sass-resources-loader。

npm install sass-resources-loader

      b.找到build文件夹下面的utils.js 找到 less: generateLoaders('less') 

替换为:

    less: generateLoaders("less").concat(

      loader: "sass-resources-loader",

      options:

        resources: path.resolve(__dirname, "../src/assets/css/base-style.less")

     

    ),

c.vue 文件引入