Process.env.NODE_ENV variables in scss via webpack

Is there a way to reference the process.env.NODE_ENV in the scss file by passing it to the sass-loader in the webpack. If anyone knows how to do this?

Here is my array of webpack loders packages.

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]'
      }
    ] 

      

I even tried

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

      

but the above broke the build. I just want to access the url in my scss file depending on the environment. It doesn't have to be via webpack, any ideas would help without hard coding. eg:

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

      

+3


source to share





All Articles