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

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

我们的全局变量/mixin通过@nuxtjs/style资源模块添加到基本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>

//component-name.vue
//模板事物
导出默认值{
数据（）{
返回{
projectPrefix:process.env.PROJECT\u前缀
}
}
}
}
@导入'base/assets/styles/scss/_component-name.scss'；
//我们只想基于projectPrefix导入以下样式表之一
@导入“/projects/project foo/assets/styles/scss/_component-name.scss”；
@导入“./projects/projectbar/assets/styles/scss/_component-name.scss”；
@导入“/projects/project baz/assets/styles/scss/_component-name.scss”；
...

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

---

有没有人知道一个很好的解决方案，可以根据环境变量动态导入样式表？

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

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

导出默认值{
数据（）{
返回{
projectPrefix:process.env.PROJECT\u前缀
}
}
}
}

这是一种有趣的方法，因为它允许我们在每个子组件上使用特定的样式。我假设您建议的是一个“空”组件，它只有一个与之相关联的样式，而呈现的HTML仍然只处于初始组件级别，对吗？我觉得这有点像黑客，可能会给注册和维护这些组件的工作流程增加太多，但如果没有更好的解决方案，它似乎可以工作。谢谢你的建议！是的，这确实是缺点。理想情况下，您应该避免没有任何语义意义的标记。如果您找到更好的解决方案，请告诉我；）