How can I read less variables in javascript like less-vars-to-js?

I'm working on a React project(webpack2、less etc), but not SSR(node environment)，so I can't use fs or node-glob module.

Some people suggest me writting a webpack loader myself :( i'm not really familiar with that... And I already used less-loader...

javascript

import lessToJs from 'less-vars-to-js';
import styles from './style.less';

const jsStyle = lessToJs(styles); => Uncaught TypeError: sheet.match is not a function

const myponent = (
  <MyComponent
    className={styles.nav}
    tintColor={jsStyle['@tint-color']}
  />
);

less

@import "../../../themes/theme.web.less";

@tint-color: grey;

.nav {
  background-color: @tint-color;
}

webpack

config.module.rules.push({
  test: /\.less$/,
  exclude: /node_modules/,
  use: [
    { loader: 'style-loader' },
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1,
      },
    },
    { loader: 'postcss-loader' },
    { loader: 'less-loader' },
  ],
});

How can I read less variables in javascript like less-vars-to-js?

I'm working on a React project(webpack2、less etc), but not SSR(node environment)，so I can't use fs or node-glob module.

Some people suggest me writting a webpack loader myself :( i'm not really familiar with that... And I already used less-loader...

javascript

import lessToJs from 'less-vars-to-js';
import styles from './style.less';

const jsStyle = lessToJs(styles); => Uncaught TypeError: sheet.match is not a function

const myponent = (
  <MyComponent
    className={styles.nav}
    tintColor={jsStyle['@tint-color']}
  />
);

less

@import "../../../themes/theme.web.less";

@tint-color: grey;

.nav {
  background-color: @tint-color;
}

webpack

config.module.rules.push({
  test: /\.less$/,
  exclude: /node_modules/,
  use: [
    { loader: 'style-loader' },
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1,
      },
    },
    { loader: 'postcss-loader' },
    { loader: 'less-loader' },
  ],
});

• javascript
• reactjs
• less
• webpack-2

• 4 Under normal circumstances, the LESS will have been piled to CSS before being sent to the browser, at which point the LESS variables no longer exist, so you can't read them. – Quentin Commented May 19, 2017 at 7:17
• 1 Implement a custom webpack loader that extracts variables from less files. – Yury Tarabanko Commented May 19, 2017 at 7:18

1 Answer 1

As I mentioned in my ment you could implement custom loader. Something like this (haven't tested)

//utils/less-var-loader.js
const lessToJs = require('less-vars-to-js')

module.exports = function(content) {
  return `module.exports = ${JSON.stringify(lessToJs(content))}`
}

and then

import * as styles from '!!./utils/less-var-loader!./style.less'

Double bang !! to ignore preconfigured loaders.