相关疑难解决方法(0)

背景

考虑以下_variables.scss文件：

/* Define all colours */
$white:    #fff;
$black:    #000;
$grey:     #ccc;
// etc...

// Export the color palette to make it accessible to JS
:export {
    white: $white;
    black: $black;
    grey: $grey;
    // etc...
}

上面的代码的目的是通过像这样的导入方式使SCSS变量可用于Javascript：

import variables from 'variables.scss';

在此处查看更详细的描述。

问题

现在考虑以下模板（我以Vue.js模板为例，但这与众多框架有关）：

<!-- Template here... -->

<style lang="scss" scoped>

    // Import Partials
    @import "~core-styles/brand/_variables.scss";
    @import "~core-styles/brand/_mixins.scss";

    // Styles here...

</style>

在上面的示例中，我使用了该scoped属性，因为该属性演示了即将出现的问题的最坏情况，但是即使没有问题，scoped该问题也仍然存在。

上面的SCSS将按照以下方式进行编译：

[data-v-9a6487c0]:export {
    white: #fff;
    black: #000;
    grey: #ccc; …