![](/img/trans.png)
[英]How can I read/write local variables dynamically in JavaScript/TypeScript?
[英]How can I read Less variables in Javascript?
如何在javascript中讀取較少的變量 ,如less-vars-to-js ?
我正在研究一個React項目(webpack2,less等),但不是SSR(節點環境),所以我不能使用fs
或node-glob
模塊。
有些人建議我自己寫一個webpack加載器:(我真的不熟悉...而且我已經使用了較少的加載器......
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' },
],
});
正如我在評論中提到的,您可以實現自定義加載器。 像這樣的東西(尚未測試)
//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'
雙爆!!
忽略預先配置的加載器。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.