如何使用环境变量在 Nuxt 中动态导入 SCSS 样式表

Posted 2023-02-22

【中文标题】如何使用环境变量在 Nuxt 中动态导入 SCSS 样式表

【英文标题】：How to Dynamically Import SCSS Stylesheets in Nuxt using an Environment Variable

【发布时间】：2020-10-22 01:58:13

【问题描述】：

我们在 monorepo 中运行 Nuxt，一切运行良好。我们正在使用包含可重用组件和样式表的 /base 目录，每个项目在 /projects 目录中都有自己的子目录。

我们的全局变量/mixin 正在通过@nuxtjs/style-resources 模块添加到基础 nuxt.config.js 中，然后我们将其扩展并导入到项目自己的 nuxt.config.js 中。

在我们的组件中，我们希望使用环境变量动态导入特定于项目的样式表。我们目前有类似的东西：

//component-name.vue

<template>
  //Template things
</template>

<script>
  export default 
    data() 
      return 
        projectPrefix: process.env.PROJECT_PREFIX
      
    
  

</script>

<style lang="scss">
  @import 'base/assets/styles/scss/_component-name.scss';

  //We would like to import the JUST ONE of the following stylesheets based on projectPrefix
  @import './projects/project-foo/assets/styles/scss/_component-name.scss';
  @import './projects/project-bar/assets/styles/scss/_component-name.scss';
  @import './projects/project-baz/assets/styles/scss/_component-name.scss';
  ...
</style>

目前，就每个项目正确显示的样式而言，一切正常。问题是我们还以这种方式包含了一堆未使用的样式。

有没有人知道如何根据环境变量动态导入样式表的好解决方案？

【参考方案1】：

您可以为环境变量创建一个组件。比如：

<template>
  <component-with-style-a v-if="projectPrefix === 'A'" />
  <component-with-style-b v-else />
</template>

<script>
  export default 
    data() 
      return 
        projectPrefix: process.env.PROJECT_PREFIX
      
    
  

</script>

【讨论】：

这是一种有趣的方法，因为它允许我们在每个子组件上拥有特定的样式。我假设您是在建议一个“空”组件，它只有一个与之关联的样式，并且渲染的 html 仍然只是在初始组件级别，对吗？我觉得这有点小题大做，并且可能会给注册和维护每个组件的工作流程增加太多内容，但如果没有更好的解决方案，它似乎可以工作。感谢您的建议！

是的，这确实是缺点。理想情况下，您会避免没有任何语义含义的标记。如果您找到更好的解决方案，请告诉我 ;)