Vue.js 访问每个组件中的颜色变量

我在寻找一个让我的生活更轻松的方法。我想用类似的调色板为我的nuxtjs应用程序中的每个组件设置样式，但我确实需要在每个组件中输入调色板。第一次尝试使用scss。我如何将变量放在更全局的位置，以及如何访问它们

我试图将代码放入assets/scss/styles.scss中，但组件对远程scs一无所知

$color1:#808060

$color2:#3d34

$color3:#151510

$color4:#090906

如前所述，将为您提供多个选项来完成任务

然而，在采取这种方法之前，您需要进行思考。通常，您应该在每个组件SCS中导入变量文件：

<style lang="scss">
    @import "<PATH_TO_ROOT>/assets/scss/styles.scss";

    .someclass { color: $some-variable; }
</style>

有几个优点。样式表不再绑定到特定于框架的抽象。在其他框架之上构建的其他代码库中，您可以更轻松地重用您的样式。当然，如果您需要有<强>范围的CSS <强> > <代码> .VU.<代码>文件提供框外，请考虑使用BEM符号。

最后，如果您决定在每个组件中导入变量

.scss

文件，那么您可以使用

节点sass

和

网页包

别名来缩短导入路径。

通读此线程：（），尤其是在最后。它可以告诉您如何定义一些SCSS变量，并使它们在Vue组件中全局可用。

// External third party scss from node_modules
@import '~@material/button/button`;

// Base color style sheet (SCSS variable are global)
// By importing it here, all the subsequent .scss file have access to variables
@import './styles/colors`;

@import './components/component-1`;
@import './components/component-2`;

// .... Add remaining component
@import './components/component-n`;