如何使用laravel mix和webpack将环境变量传递给scss/ sass文件？
我有一个环境变量CDN_URL，我想把这个变量发送到SCSS文件。我也尝试过sass-loader的prependData。
我必须使用Laravel 5.7、Laravel Mix 4.1.2和webpack 4.27.1
错误："...load the style“后的CSS无效:应为1个选择器或at-rule，为"var content = requi”
下面是我的'webpack.mix.js‘文件代码。
mix.webpackConfig({
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'vue-style-loader',
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
indentedSyntax: true,
prependData: '$cdn-s3-static-url: ' + process.env.CDN_S3_STATIC_URL + ';',
},
},
],
},
],
},})；
下面是我的'_functions.scss‘文件代码：
@function asset($type, $file) {
@return url('#{$cdn-s3-static-url}#{$asset-base-path}#{$type}/#{$file}');
}回答 3
Stack Overflow用户
发布于 2019-09-30 20:03:34
您可以使用sass-loader将数据预先添加到SASS
例如，从.env传递CDN_URL
扩展webpack.mix.js
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
prependData: '$env: ' + process.env.CDN_URL + ';',
},
},
],
},
],
},
};Stack Overflow用户
发布于 2020-10-20 18:09:17
在我的例子中，我运行的是一个gatsby网站。在每次构建之前，它都会运行gatsby-config.js，它可以访问环境变量。
因此，在构建的.js文件的顶部，在module.exports之前，我放置了以下内容：
if(process.env.NODE_ENV === 'development') {
fs.writeFileSync('./src/styles/build-style.scss','$root: "/development-path/";');
} else {
fs.writeFileSync('./src/styles/build-style.scss','$root: "/production-path/";');
}这将生成一个如下所示的文件：
$root: "/development-path/";然后在我需要ENV依赖行为的SCSS文件中，我有：
@import './build-style.scss';
@font-face {
font-family: "MyFontFamily";
src: url($root + "font/MyFontFamily.woff") format('woff');
}现在，我的资产(本例中为font)根据我的dev/production环境变量从不同的位置加载。
这感觉像一个大的黑客，我相信有一个更正确的方法，但这让我在一个小时后再次移动，到目前为止，它是有效的。我可能会在将来将其扩展到build-style-dev.scss、build-style-prod.scss，并在编译时将它们复制到build-style.scss中。或者研究正确的方法。
Stack Overflow用户
发布于 2019-09-30 19:42:56
您可以通过在.env文件中为密钥添加前缀MIX_来将环境变量注入到Laravel Webpack Mix中。在.env文件中定义变量后，您可以通过process.env对象进行访问。
因此，在您的示例中，应该在MIX_CDN_URL这样的.env文件中创建一个新变量，并且在webpack.mix.js中可以使用以下命令访问它
process.env.MIX_CDN_URL你可以通过sass-loader来实现你想要的结果。
https://stackoverflow.com/questions/58174234
复制
相似问题
Laravel mix.sass "prependData“不向scss文件提供数据
Webpack -导出SASS (.scss)文件
(Laravel)如何在webpack.mix.js中实现sass和tailwindcss
如何使用laravel-mix正确组合sass和less文件？
如何将sass和scss与webpack相结合？
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
