.styl文件定义的变量，如何在vue组件的script中使用

Question

比如 xx.styl文件如下

$height = 180px

如何在 vue组件中的script 中使用 这个 $height ？？

<template>
    <div :height='height'></div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                height:$height
            }
        }
    }
</script>

<style lang='stylus'>

</style>

Answer 1

在 <style lang="stylus"> 里 @import 'variable.styl'。需要注意的是，vue-loader@15 之后，stylus 会直接交给 stylus 处理，所以这里并不支持 webpack 的 alias 定义，所以这里的路径关系很麻烦。

所以楼上说的很对，与其这么费劲吧啦的 @import，不如使用 css variable。

Answer 2

请问你要解决什么场景问题呢？ js 是不能直接访问到 stylus 全局变量的。

如果想实现换肤功能，可以试试 css 自定义属性