时间戳

首页 > 解决方案 > 访问每个组件中的颜色变量

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

问题描述

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

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

$颜色1：#808060；

$颜色2：#3D3D34；

$颜色3：#151510；

$颜色4：#090906；

标签： vue.jssassfrontendnuxt.js

解决方案

正如@jayce444提到的，这个线程将为您提供多个选项来完成任务。

但是，在采用这种方法之前，您需要考虑一下。通常，您应该在每个组件 SCSS 中导入您的变量文件：

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

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

通过这样做，您将保护自己免受许多不确定的未来可能性。他们之中有一些是：

  • 将存储库拆分为多个微前端
  • 像 Mono 回购设置一样进入 Lerna
  • 在其他代码库中重用组件

显式比拥有神奇的自动/全局导入更易于维护。作为开发人员，我们花费更多时间维护代码而不是编写新代码。

或者，另一个干净的解决方案不vue-loader用于管理 SCSS。这意味着您不应该在文件中使用style标签。.vue

创建一个主style.scss文件。为每个组件创建专用.scss文件。并将所有这些文件导入到 master 中style.scss，例如：

// 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`;

有几个优点。您的样式表不再依赖于特定于框架的抽象。您可以使用构建在其他框架之上的其他代码库更轻松地重用您的样式。当然，如果您需要Scoped-CSS哪些.vue文件提供开箱即用，请考虑使用 BEM 表示法。

最后，如果您决定.scss在每个组件中导入变量文件，那么您可以使用node-sass和webpack 别名来缩短导入路径。

推荐阅读