Vue 3.0 中引入 配置全局less 文件

在可发过程中会定义很多需要全局使用的东西 比如颜色，动画，样式等

自定义一个全局样式 common.less

// 实际的内容根据自己的项目需要填充
* {
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: 14px;
}

body {
    height: 100%;
    color: #333;
    min-width: 1240px;
}

ul,h1,h2,h3,h4.p,dl,dd {
    padding: 0;
    margin: 0;
} 

a {
    text-decoration: none;
    color: #333;
    outline: none;
}

img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

ul {
    list-style: none;
}

.clearfix::after {
    content: ".";
    display: block;
    visibility: hidden;
    height: 0;
    line-height: 0;
    clear: both;
}

• 样式组件的应用我没有引入外部插件直接在main.js 中导入

1、在main.js 文件中
// 引入公共样式组件
import '@/assets/styles/commom.less'

创建全局颜色样式less 文件

//  定义项目中常用的颜色样式
@xtxColor:#008c8c;
@textColor:#ccc;

• 这里有一个疑问还没搞清楚 这个文件不能直接在main.js 中引用 但是common.less 却可以 还不知道原因 后面明白了再过来补充上（有大佬知道的还望告知）
• 所以这里导入了外部插件 less

// 命令行输入
vue add style-resources-loader
// 会让你选择模式 我选的是less
等待安装完成后在vue.config.js 文件中会多一个配置项
 pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [path.resolve(__dirname, 'src/assets/styles/mixin.less')]
        }
    } 
    

• 在数组对象中 补充完成自己的文件路径就可以使用了
• 补充： 因为是数组所以可以引入多个文件
• 最后别忘了 修改配置文件需要重启服务