Vite配置第三方组件全局样式遇坑

项目使用了Vant组件库，想去改变全局的Toast样式

有一个样式文件index.less，里面进行了Vant相关样式调整。希望通过构建，将其引入到自己的组件中

开始通过preprocessorOptions进行引入，发现对Vant组件修改的样式不起效果，但是普通标签被修改样式后是有效果的

preprocessorOptions: {
    less: {
        javascriptEnabled: true，
        additionalData: `@import '${resolve(__dirname, `./assets/style/index.less`)}';`
    }
}

 后来在main.js文件中单独引入文件却能生效

import '@assets/style/index.less'

 

然后通过元素检查，发现Toast组件是没有使用scpoed属性，但是自己的组件是使用了scoped属性

两个问题

1. 为什么在构建中引入没有效果
2. 为什么在main.js中引入有效果，我是scpoed但是子组件（Toast）不是scoped