Question

我正在寻找使我的生活更轻松的窍门。我想用相似的调色板为nuxtjs应用程序中的每个组件设置样式，但是我确实需要在每个组件中输入调色板。尝试首次使用scss。如何更全局地放置变量以及如何获取变量？

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

$ color1：＃808060；

$ color2：＃3D3D34;

$ color3：＃151510;

$ color4：＃090906;

Answer 1

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

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

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

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

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

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

与具有神奇的自动/全局导入功能相比，保持明确状态更易于维护。作为开发人员，我们花在编写代码上的时间要多于编写新代码的时间。

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

创建一个主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 aliases 来缩短导入路径。

Answer 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了解更多信息

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

2 个答案: