通过 webpack 将 process.env.NODE_ENV 变量导入 scss

Posted 2023-02-22

【中文标题】通过 webpack 将 process.env.NODE_ENV 变量导入 scss

【英文标题】：process.env.NODE_ENV variables into scss via webpack

【发布时间】：2017-09-29 03:29:48

【问题描述】：

有没有办法通过将它传递给 web-pack 中的 sass-loader 来引用 scss 文件中的 process.env.NODE_ENV。如果是这样，有人知道该怎么做吗？

这是我的 webpack 模块 lodaers 数组。

module: 
    loaders: [
       test: /\.js?$/,
        loader: 'babel-loader',
        include: path.join(__dirname, '../app'),
        exclude: /node_modules/
      ,
       test: /\.scss?$/,
        loader: 'style-loader!css-loader!sass-loader',
        include: path.join(__dirname, '../app', 'styles')
      ,
      
        test: /\.(jpe?g|png|gif|svg)$/i,
        include : path.join(__dirname, '../app', 'images'),
        loader  : 'file-loader?limit=30000&name=[name].[ext]'
      ,
      
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        include : path.join(__dirname, '../app', 'fonts'),
        loader: 'file-loader?name=fonts/[name].[ext]'
      
    ] 

我什至尝试过

       test: /\.scss?$/,
        loader: 'style-loader!css-loader!sass-loader',
        include: path.join(__dirname, '../app', 'styles'),
        options: 
          data: "$env: " + process.env.NODE_ENV + ";"
        
      

但以上内容破坏了构建。 我只是想要一种根据环境访问我的 scss 文件中的 url 的方法。 它不必通过 webpack 任何想法都可以在没有硬编码的情况下提供帮助。 例如：

  .contact-transparent
    width: 100%;
    height: 100%;
    background: url(process.env.NODE_ENV+'/home-background.jpg') left center no-repeat;
  

【参考方案1】：

我认为您可以使用自定义加载器来完成此操作，您可以在其他加载器之前为您的 Sass 文件链接该加载器。在该加载程序中，您将检查 NODE_ENV 的值并在 Sass 源中进行查找/替换，其中替换的值基于 env。不花哨，但会完成工作。例如：

// url-by-env-loader.js
module.exports = (source) => 
  const urlsByEnv = 
    dev: "the-dev-host.com",
    staging: "the-staging-host.com",
    prod: "the-prod-host.com"
  ;
  const urlToReplace = "the-url-in-your-sass-source.com";
  const urlToUse = urlsByEnv[process.env.NODE_ENV];
  const replaceRegex = new RegExp(urlToReplace, 'g');  

  return source.replace(replaceRegex, urlToUse);