reactjs - How can I read Less variables in Javascript? - Stack Overflow

admin管理员组

文章数量:1305082

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

Share Improve this question Follow edited May 19, 2017 at 7:39 Kim asked May 19, 2017 at 7:15 KimKim 5,44577 gold badges4141 silver badges6464 bronze badges 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.

本文标签： reactjsHow can I read Less variables in JavascriptStack Overflow