如何在 Javascript 中阅读更少的变量

Question

如何在javascript中读取更少的变量，例如less-vars-to-js？

我正在研究一个 React 项目(webpack2、更少等(，但不是 SSR(节点环境(，所以我不能使用 fs 或node-glob模块。

有些人建议我自己编写一个 webpack 加载器:(我对此不太熟悉...而且我已经使用了更少的加载器...

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 mycomponent = (
  <MyComponent
    className={styles.nav}
    tintColor={jsStyle['@tint-color']}
  />
);

少

@import "../../../themes/theme.web.less";
@tint-color: grey;
.nav {
  background-color: @tint-color;
}

网络包

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' },
  ],
});

Answer 1

正如我在评论中提到的，您可以实现自定义加载器。像这样的东西(尚未测试(

//utils/less-var-loader.js
const lessToJs = require('less-vars-to-js')
module.exports = function(content) {
  return `module.exports = ${JSON.stringify(lessToJs(content))}`
}

然后

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

双砰!!忽略预配置的加载程序。