我想这样做:

我有这样一个数组:
@levels:'level_one','level_two','level_three','level_four','level_five','level_six','level_seven','level_eight';
Run Code Online (Sandbox Code Playgroud)
这些级别中的每一个还具有对应的变量,该变量是颜色,并且匹配级别指示符的列表标记中的类.我能够轻松地遍历这些以生成每个级别的背景颜色.
我希望能够为每个项目自动设置高度,所以从理论上讲,如果我想在指标中添加第9或第10级,我只需添加颜色变量,将其添加到数组并添加相关标记,必须在每个类上明确设置高度.
.for(@levels); .-each(@color) {
@name: e(@color);
&.@{name} {
background:@@name;
}
}
Run Code Online (Sandbox Code Playgroud)
我正在循环上面的级别,但是以某种方式可以获得循环的当前索引以及@levels数组的计数来计算每个项目的基于百分比的高度?例如.如果有10个项目,第一个项目是10%的高度等等?
期待任何建议!
谢谢!
我正在尝试使用babel-plugin-react-css-modules弹出的副本create-react-app来限制我的LESS CSS.
我已经设法安装和配置插件,它正在使用styleName属性正确设置范围类名,我已将其配置为使用LESS以及文档.
但是,在导入生成的CSS时,它不会转换类名以匹配元素上设置的类名.这是我webpack.config.dev.js和App.js文件的相关部分.
module: {
// First, run the linter.
// It's important to do this before Babel processes the JS.
preLoaders: [
{
test: /\.(js|jsx)$/,
loader: 'eslint',
include: paths.appSrc,
}
],
loaders: [
// ** ADDING/UPDATING LOADERS **
// The "url" loader handles all assets unless explicitly excluded.
// The `exclude` list *must* be updated with every change to loader extensions.
// When adding a new loader, you …Run Code Online (Sandbox Code Playgroud)