有没有可能通过vite插件从vue的js中获取在style块中声明的scss变量？

cgyqldqp 于 2023-08-07 发布在 Vue.js

关注(0)|答案(1)|浏览(123)

我想在vue中创建一个vite插件，它能够获取<style>块中的scss/sass内容，并将其变量提取到js对象中，然后js可以访问这些变量。举例来说：

<script setup>
    const variables = getScssVariables(); // { foo: "30px", bar: "400ms" }
</script>
<template>
    <!-- -->
</template>
<style lang="scss">
    $foo: 30px;
    $bar: 400ms;

    // ...
</style>

字符串
这可以通过创建一个vite插件来实现吗？

vue.js

来源：https://stackoverflow.com/questions/76693342/is-it-possible-to-get-scss-variables-declared-in-style-block-from-js-in-vue-via

1条答案

按热度按时间

2ic8powd1#

您的插件：
放入vite.config.js或单独的文件

plugins:[{

  load(id){

    if(!id.endsWith('.vue')){
      return;
    }

    const src = fs.readFileSync(id);

    // extract your scss vars from src
    // you could use https://www.npmjs.com/package/scss-parser

    // inject the vars:
    return src.replace('getScssVariables()', 'your css vars as object');

  }

}]

字符串

赞(0）回复(0）举报 2023-08-07

我来回答

有没有可能通过vite插件从vue的js中获取在style块中声明的scss变量？

1条答案

相关问题

热门标签

最新问答