CODEWITHSUNDEEP
reactjsjsx
RRR uzumaki
RRR uzumaki

Reputation: 1328

Use variables declared in the webpack config inside js file

I have added some varaibles inside my webpack.config.js file like this

module: {
    strictExportPresence: true,
    rules: [
      // Disable require.ensure as it's not a standard language feature.
      { parser: { requireEnsure: false } },

     
          {
            test: lessRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                javascriptEnabled: true
              },
              'less-loader',
              {
                javascriptEnabled: true,
                modifyVars: { '@primary-color': '#5cb885','@secondary-color':'#2e3456' }
              }
            )
          }
        ]
      }

so in css file i can use them via

index.less

.mainText {
  line-height: 1.5;
  font-size: 32px;
  color: @primary-color;
}

But how can i use this variable in my jsx file if suppose i want to give inline styling for any element ?

Upvotes: 0

Views: 489

Answers (1)

Rajat Sharma
Rajat Sharma

Reputation: 65

In your webpack file you can declare any variable like this ->

module.exports = {
  externals: {
    'config': JSON.stringify({EXP_TIME: new Date()})
  },
  modules: [...],
}

Then in any JS file you can simply import like this ->

var config = require('config')
var tokenExpTime = config.EXP_TIME
console.log(tokenExpTime)    //Will print current date and time

Hope you got the point now. :)

Upvotes: 1

Related Questions