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

Question

我们在 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>

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

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

Answer 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>