Css 基于环境的Sass动态导入

我正在尝试根据环境切换sass导入URL。我已经复习了很多其他的问题和答案，这一直在困扰着我的每一步@导入不允许动态字符串，因此我尝试基于环境变量为每个字符串和@if/@else使用mixin，但是我无法从其他sass文件访问根环境变量

webpack.config.js

constscssrule=config.module.rules.find（rule=>rule.test.test（“.scss”）；
const-scssLoaderConfig=scssRule.use.find（（{loader}）=>loader==“sass-loader”）；
scssLoaderConfig.options=scssLoaderConfig.options | |{}；
scssLoaderConfig.options[“实现”]=require（“sass”）//飞镖
scssLoaderConfig.options[“additionalData”]=`$env:“${env}”`//将环境传递给sass

theme.scss

//NOTE: This $env line is not actually in the file. It gets injected by webpack via sass-loader additionalData
$env: "preprod";

@forward "icons" as icon_*;
//More @forward directives such as colors

_icons.scss

@mixin importIconsPreprod {
    @import "https://preprod.example.com/icons.css";
}
@mixin importIconsProd {
    @import "https://example.com/icons.css";
}

@mixin importIcons() {
    //SassError: Undefined variable.
    @if $env == "preprod" {
        @include importIconsPreprod;
    } @else {
        @include importIconsProd;
    }
    
    //More styles here
}

//"env" file is created as part of webpack.config.js
@use "includes/env" as *;

@mixin importIconsPreprod {
    @import "https://preprod.example.com/icons.css";
}
@mixin importIconsProd {
    @import "https://example.com/icons.css";
}

@mixin importIcons() {
    @if $env == "preprod" {
        @include importIconsPreprod;
    } @else {
        @include importIconsProd;
    }
}

期望的实现

@use "theme-package" as theme;

//Import icons from theme.icon namespace
@include theme.icon_importIcons;

---

过了一段时间，我找到了解决办法。我最终生成了一个文件_env.scss作为webpack的一部分。此文件包含$env sass变量，该变量指示环境，并由_icons.scs加载。代码如下：

webpack.config.js

const writeEnvScss=require（“./scripts/write env scss.js”）；
//写入_env.scss，默认为“prod”
writeEnvScss（“./packages/Theme/src/Component/includes/_env.scss”，“prod”）；

_作为生成的一部分生成的env.scs

$env:"preprod";

_icons.scss

@mixin importIconsPreprod {
    @import "https://preprod.example.com/icons.css";
}
@mixin importIconsProd {
    @import "https://example.com/icons.css";
}

@mixin importIcons() {
    //SassError: Undefined variable.
    @if $env == "preprod" {
        @include importIconsPreprod;
    } @else {
        @include importIconsProd;
    }
    
    //More styles here
}

//"env" file is created as part of webpack.config.js
@use "includes/env" as *;

@mixin importIconsPreprod {
    @import "https://preprod.example.com/icons.css";
}
@mixin importIconsProd {
    @import "https://example.com/icons.css";
}

@mixin importIcons() {
    @if $env == "preprod" {
        @include importIconsPreprod;
    } @else {
        @include importIconsProd;
    }
}

write-env-scss.js

const fs=require（“fs”）；
常量路径=要求（“路径”）；
//查找可选的--env cli param或NODE_env环境变量
module.exports=函数（scssPath，默认值）{
scssPath=scssPath | | null；
如果（！scssPath）{
抛出新错误（“需要scss路径”）；
}
envDefault=envDefault | |“本地”；
//测定环境
设env=getArg（“--env”）| process.env.NODE|u env|null；
开关（环境）{
案例“发展”：
“本地”案例：
env=“本地”；
打破
案例“prepod”：
打破
案例“生产”：
案例“prod”：
env=“prod”；
打破
违约：
env=envDefault；
打破
}
log（“ENV=>”，ENV）；
//将_env.scs写入主题
writeFileSync（path.resolve（scssPath），`$env:“${env}”；`；
};
函数getArg（键）{
var index=process.argv.indexOf（key）；
var next=process.argv[index+1]；
返回索引<0？空：！下一个| |下一个[0]==“-”？真：下一个；
}

过了一段时间，我找到了解决办法。我最终生成了一个文件_env.scss作为webpack的一部分。此文件包含$env sass变量，该变量指示环境，并由_icons.scs加载。代码如下：

webpack.config.js

const writeEnvScss=require（“./scripts/write env scss.js”）；
//写入_env.scss，默认为“prod”
writeEnvScss（“./packages/Theme/src/Component/includes/_env.scss”，“prod”）；

_作为生成的一部分生成的env.scs

$env:"preprod";

_icons.scss

@mixin importIconsPreprod {
    @import "https://preprod.example.com/icons.css";
}
@mixin importIconsProd {
    @import "https://example.com/icons.css";
}

@mixin importIcons() {
    //SassError: Undefined variable.
    @if $env == "preprod" {
        @include importIconsPreprod;
    } @else {
        @include importIconsProd;
    }
    
    //More styles here
}

//"env" file is created as part of webpack.config.js
@use "includes/env" as *;

@mixin importIconsPreprod {
    @import "https://preprod.example.com/icons.css";
}
@mixin importIconsProd {
    @import "https://example.com/icons.css";
}

@mixin importIcons() {
    @if $env == "preprod" {
        @include importIconsPreprod;
    } @else {
        @include importIconsProd;
    }
}

write-env-scss.js

const fs=require（“fs”）；
常量路径=要求（“路径”）；
//查找可选的--env cli param或NODE_env环境变量
module.exports=函数（scssPath，默认值）{
scssPath=scssPath | | null；
如果（！scssPath）{
抛出新错误（“需要scss路径”）；
}
envDefault=envDefault | |“本地”；
//测定环境
设env=getArg（“--env”）| process.env.NODE|u env|null；
开关（环境）{
案例“发展”：
“本地”案例：
env=“本地”；
打破
案例“prepod”：
打破
案例“生产”：
案例“prod”：
env=“prod”；
打破
违约：
env=envDefault；
打破
}
log（“ENV=>”，ENV）；
//将_env.scs写入主题
writeFileSync（path.resolve（scssPath），`$env:“${env}”；`；
};
函数getArg（键）{
var index=process.argv.indexOf（key）；
var next=process.argv[index+1]；
返回索引<0？空：！下一个| |下一个[0]==“-”？真：下一个；
}

在我的项目（跨浏览器扩展）中，我正在使用中的

includePaths

选项来实现类似的功能

通常，

includePaths

扩展了可从中导入scss模块以正确编译的文件夹范围。因为它是一个JSAPI，所以可以通过变量动态设置该路径

下面是一个我如何操作的示例（我正在使用

gulp

和

gulp sass

，但它与webpack的工作方式相同。示例被简化，没有节点的“路径”）：

• 文件夹结构：

• styles.scss

  ：

• gulpfile.js

const{src，dest}=require（'gulp'）；
const-sass=require（'gulp-sass'）；
功能样式（浏览器）{
const srcPath=“*.scss”；
const destPath=“构建”；
返回src（srcPath）
.pipe（sass（{includePaths:browser}））
.管道（目的地（目的地路径））
}
gulp.default=函数（）{
const varDirname=“firefox”；//或“chrome”
样式（varDirname）；
}

请注意，重要的是，在

includePaths

中，您只包括文件所在的目录名，而不是像

browser/*.scss那样的glob。在我的项目（跨浏览器扩展）中，我使用的是中的
includePaths
选项来实现类似的功能

通常，
includePaths
扩展了可从中导入scss模块以正确编译的文件夹范围。因为它是一个JSAPI，所以可以通过变量动态设置该路径

下面是一个我如何操作的示例（我正在使用
gulp
和
gulp sass
，但它与webpack的工作方式相同。示例被简化，没有节点的“路径”）：


文件夹结构：


styles.scss
：


gulpfile.js

const{src，dest}=require（'gulp'）；
康斯特萨斯酒店=