Sass 同时导出JavaScript 和 CSS变量

注意 sass-loader 版本没设太高，否则会报错 Syntax Error: TypeError: this.getOptions is not a function

npm i sass sass-loader@10 -D

variables.module.scss。注意这里是 module.scss：

$testBg01: red;
$testBg02: blue;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
    testBg01: $testBg01;
    testBg02: $testBg02;
}

<template&gt;
    <div&gt;
        <div class="box box01"&gt;</div&gt;
        <div class="box box02"></div>
    </div>
</template>

<script>
import variables from '../assets/variables.module.scss';

export default {
    mounted() {
        
        console.log('variables', variables);
    }
}
</script>
<style lang="scss" scoped>
@import '../assets/variables.module.scss';

.box {
    display: inline-block;
    width: 100px;
    height: 100px;
}
.box01 {
    background: $testBg01;
}
.box02 {
    background: $testBg02;
}
</style>