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

Posted 2023-02-22

【中文标题】访问每个组件中的颜色变量

【英文标题】：Accessing color variables in each component

【发布时间】：2019-05-28 17:38:37

【问题描述】：

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

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

$color1: #808060;

$color2: #3D3D34;

$color3: #151510;

$color4: #090906;

【问题讨论】：

通读此线程：(github.com/vuejs/vue-loader/issues/328) 特别是接近尾声。它可以告诉你如何定义一些 SCSS 变量并让它们在你的 Vue 组件中全局可用。

【参考方案1】：

正如@jayce444 提到的，this thread 将为您提供多种选择来完成任务。

但是，在采用这种方法之前，您需要三思。一般来说，你应该在每个组件 SCSS 中导入你的变量文件：

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

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

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

将存储库拆分为多个微前端 像 Mono 存储库设置一样进入 Lerna

在其他代码库中重用组件

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

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

创建一个主style.scss 文件。为每个组件创建专用的.scss 文件。并将所有这些文件导入到主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`;

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

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

【参考方案2】：

我知道这是一个老问题，但答案仍然可能对某人有所帮助。

因此，要包含变量，请在全局范围内混合任何 SCSS 样式，您需要使用 NuxtJS Style resource 加载它。

例如，您将在 /assets/scss 中拥有 settings.scss 文件

$color-one: #fff;
$color-two: #000;

你可以通过 styleResources 对象将它导入到 nuxt.config.js 中

styleResources: 
    scss: ['assets/scss/settings.scss']
,

请务必阅读Style Resources documentation 了解更多信息