javascript - 如何使用环境变量在 Nuxt 中动态导入 SCSS 样式表
问题描述
我们在 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>
目前,就每个项目正确显示的样式而言,一切正常。问题是我们还以这种方式包含了一堆未使用的样式。
有谁知道我们如何能够基于环境变量动态导入样式表的好解决方案?
解决方案
您可以为 env 变量创建一个组件。就像是:
<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>
推荐阅读
- android - 如何检测 RxJava 代码中泄露的一次性订阅?
- string - 当字符串是可变的时,攻击是如何发生的?
- css - CSS 选择器特异性
- javascript - 如何在 Squarespace 中将鼠标悬停在按钮上进行背景切换
- python - 使用原始的 Django 计数列
- c# - 在 .NET Core 和 .NET Framework 应用程序中使用库项目时,转换库项目的最佳选择是什么?
- react-native - 无法从 bottomTab Navigator 导航到 Stack Navigator
- elasticsearch - 有没有办法通过'order'字段对百分位聚合进行排序是Elasticsearch?
- php - 函数“gdPngGetVersionString”的隐式声明在 C99 中无效 [-Werror,-Wimplicit-function-declaration]
- azure - 使用 ARM 模板将用户分配的标识用于 AKS 群集