在Node.js和React.js中编译LESS

Question

Is there a way to automatically compile LESS in React.js?

I've installed it according to the docs

I know it's possible to use the lessc command, but it seems tedious to run that command manually everytime the less is updated.

I've tried this one too, but it doesn't work:

import React, {Component}  from 'react';
import ReactDOM from "react-dom";

var less = require('less');
var lessCss = require('./app.less');

console.log(lessCss); //output: /static/media/app.725ced4d.less

less.render(lessCss, function (e, output) {
    console.log(e); //output: Unrecognized Input
    console.log(output); //output: undefined
});

class Main extends Component {
    /* render functions */

Answer 1

React Native comes with everything you need already, i would suggest not using LESS but the preferred way from the official docs:

const styles = StyleSheet.create({
    mainView: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    ...
});

Source: https://facebook.github.io/react-native/docs/style.html