Vue3中全局使用Sass变量方法

1.起首需要在本身的静态资源目次下，放入两个sass文件。需要留意的是 .d 文件，是用来在开发的时候给予提示用的。 

 这是里面的内容：

1. // function.scss
3. @use "sass:math";
5. @function vw($px) {
6.     @return math.div($px, 1920) * 100vw;
7. }
9. @function vh($px) {
10.     @return math.div($px, 1080) * 100vh;
11. }

复制代码

1. // function.d.sass
3. @function vw($px) {}
5. @function vh($px) {}

复制代码

2.在构建工具中配置：
这里以vite为例：

1. export default defineConfig({
2.     css: {
3.         preprocessorOptions: {
4.             scss: {
5.                 additionalData: `@use "@/assets/functions" as *;`
6.               }
7.         }
8.     }
9. })

复制代码

到这里，你的任何.vue文件中的style中都能直接使用 vw、vh方法了。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。