Javascript 将webpack（环境）变量传递到scss文件

非常新的网页包。。。我希望能够在

sass

文件中从

webpack.config.js

读取一个值，在本例中特别是

env

的值，因此我可以根据环境使用不同的css

例如：

• 环境=发展，颜色=绿色
• 环境=生产，颜色=蓝色

到目前为止，我一直在关注sass加载程序，试图传递数据，但没有起作用，

$env

变量在我运行

npm run build:Debug

时总是未定义（这运行

webpack--app=all--env=development

）

以下是我拥有的文件：

webpack.config.js

const path=require（“路径”）；
const common=require（“./.webpack/webpack.common.config”）；
常量配置=[]；
函数addAppConfig（应用程序）{
app.module=common.module；
app.resolve=common.resolve；
config.push（应用程序）；
}
module.exports=（环境，argv）=>{
开关（argv.app）{
//在下面添加新的配置
案例“a”：
addAppConfig（aa）；
打破
案例“b”：
addAppConfig（bb）；
打破
案例“c”：
addAppConfig（cc）；
打破
违约：
案例“全部”：
addAppConfig（xyz）；
}
开关（环境）{
“本地”案例：
config.forEach（appConfig=>{
//“开发”模式配置选项告诉webpack使用其内置的开发优化
// https://webpack.js.org/configuration/mode/#mode-发展
appConfig.mode=“开发”；
appConfig.output.path=path.resolve（_dirname，“../dist”）；
appConfig.output.publicPath=”http://localhost:3000/dist";
appConfig.devtool=“内联源映射”；
appConfig.devServer={
contentBase:path.resolve（uu dirname，“./public”），
端口：“3000”，
watchContentBase：正确
};
});
打破
案例“发展”：
config.forEach（appConfig=>{
//“开发”模式配置选项告诉webpack使用其内置的开发优化
// https://webpack.js.org/configuration/mode/#mode-发展
appConfig.mode=“开发”；
appConfig.devtool=“内联源映射”；
});
打破
违约：
案例“生产”：
config.forEach（appConfig=>{
//“生产”模式配置选项告诉webpack使用其内置的生产优化，包括缩小尺寸等。
// https://webpack.js.org/configuration/mode/#mode-生产
appConfig.mode=“生产”；
appConfig.devtool=“廉价源代码映射”；
});
打破
}
返回配置；
};您可以使用以下方法将变量从webpack config传递到scss文件：

{
    loader: "sass-loader",
    options: {
        data: "$var1: " + yourVar1+ ";"
    }
}

（c） 
这个问题已经得到了回答，而且是正确的，但实际上我搜索了很多，以确定如何在SASS文件中使用它，并将SASS与webpack env连接起来。我想在我的回答中补充这一点

package.json

这里我们在webpack.config.js中添加NODE_ENV变量。要添加到env To package.json，请参阅：

webpack.config:

现在，在这里添加这些变量，您希望根据环境使用这些变量。比如，我想将环境添加到背景图像的动态url中

{
    loader: "sass-loader",
    options: {
        data: "$var1: " + env.NODE_ENV + ";"
    }
}

\u variables.scss

您可以在.sass文件中以任何一种方式使用它：

$image url:“https://“+$var1+”.mysite.net/images/ping.jpg”；或

输出

您的输出url如下所示：

https://dev.mysite.net/images/ping.jpg

请注意，自sass loader v8起，“数据”已更改为“prependData”：
$image-url: "https://#{$var1}.mysite.net/images/ping.jpg";

https://dev.mysite.net/images/ping.jpg