如何在Javascript中读取更少的变量？

如何在javascript中读取更少的变量

我正在处理React项目（webpack2、less等），但不是SSR（节点环境），因此我不能使用

fs

或

node glob

模块

有些人建议我自己写一个网页加载器：（我不太熟悉这个…我已经用了更少的加载器

javascript 网页包

---

正如我在评论中提到的，您可以实现自定义加载器

然后

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

---

双击

！！

忽略预配置的加载程序。

在正常情况下，LESS将在发送到浏览器之前编译为CSS，此时LESS变量不再存在，因此您无法读取它们。实现一个自定义的网页包加载程序，从LESS文件中提取变量。

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

//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'