我在SASS中有一个列表,我正在尝试使用括号表示法访问这些项目:

$collection[1];

但这给了我一个错误.

有没有其他方法可以做到这一点？

我为什么要这样做？

我有一个颜色列表,必须根据服务器分配给它们的颜色在不同的元素上设置.标记已编号的类(color-0,color-1等).这是我的目标CSS:

.color-0 { color: red }
.color-1 { color: orange }
.color-2 { color: green }
.color-3 { color: blue }
/* many more, with more complex colors... */

我没想用手写的全部内容,而是想通过循环使用SASS集合:

$color-collection: ('red', 'orange', 'green', 'blue');
$color-count: length($color-collection);

@for $i from 0 to $color-count {
    .color-#{$i} {
        color: $color-collection[ $i ];
    }
}

但这只是给我以下错误:

语法错误:"... color-collection"后的CSS无效:期望";",是"[$ i];"

我怎么能做到这一点？

我正在使用 Create-React-App 并且我想为我的标题部分添加背景图像，我是这样做的：

background-image: url('~/Screenshot_11.png');

在此之后，我收到此错误：

./src/styles/main.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!. /node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/styles/main.scss) 找不到模块：您试图导入 ../../。 ./../../../../Screenshot_11.png 位于项目 src/ 目录之外。不支持 src/ 之外的相对导入。

我在 package.json 中设置了主页

"homepage": "http://localhost:3000",

在我的旧项目中，但今天我无法正确导入它。

这是我的组件：

import { Component, OnInit, ContentChildren, QueryList } from '@angular/core';
import { IconBoxComponent } from '../icon-box/icon-box.component';

@Component({
  selector: 'app-three-icon-box',
  templateUrl: './three-icon-box.component.html',
  styleUrls: ['./three-icon-box.component.scss']
})
export class ThreeIconBoxComponent implements OnInit {
  @ContentChildren(IconBoxComponent) boxes: QueryList<IconBoxComponent>;

  constructor() { }

  ngOnInit() {
  }

  ngAfterContentInit() {
    console.log(this.boxes);
  }

}

它的模板如下所示：

<div class="row justify-content-center">
  <div class="col-12 col-md-10">
    <div class="row justify-content-center text-center">
      <div *ngFor="let box of boxes" class="col-12 col-sm-4 col-lg-3 offset-lg-1 lz-mb-2 lz-mb-sm-0">
        {{ box }}
      </div>
    </div>
  </div>
</div>

这就是我渲染它的方式：

  <app-three-icon-box>
    <app-icon-box icon="#icon-one">content 1</app-icon-box>
    <app-icon-box icon="#icon-two">content …

当用户通过锚链接导航到页面时,我希望页面向下滚动到我的锚标签.

我正在使用react-router 4,我已经定义了如下内容:

导航栏:

export default (props) => {
  const { 
    updateModal,
    updateRoute,
  } = props
  return(
    <Navbar fluid collapseOnSelect>
      <Nav>
        <NavDropdown eventKey="4" title="Solutions" id="nav-dropdown" noCaret>
          <MenuItem eventKey="4.1">
             <Link to='/solution#ipos'>TESTING ANCHOR</Link>
          </MenuItem>
...

一些路线:

export default class extends Component {
  constructor() {
    super()
    this.state = {
      isLoading: true
    }
  }
  render() {
    return (
      <Grid className='solutions' fluid>
       <Row className='someClass'>
        <div>
          <h2><a href='ipos' id='ipos'>Ipos morna santos paros</a></h2>
          ...

当我点击navebar中的锚链接时,我可以在url和我的redux商店中看到哈希锚标记,它确实导航到新路由,但它不会向下滚动到标记本身.

是由我来创建滚动功能还是它应该如何正常工作？

我正在使用 styled-components 和 Formik。除了文本区域或选择等之外，一切都运行良好。Styled-components 和 Formik 具有相同的属性as，当我想连接它时，我得到的不是预期的结果。

<StyledTextArea as={Field} placeholder="" name="topic" id="topic"></StyledTextArea>

as使用 Formik，我们还需要传递 Field 元素的属性。它应该看起来像这样：

<Field as="textarea" id="topic" name="topic"></Field>

我通过写这个解决了这个问题：

const StyledTextareaField = (props) => (
    <Field {...props} as="textarea" id="description" name="description" children={props.children}></Field>
  );

和这个：

<StyledTextArea
              as={StyledTextareaField}
              placeholder="Wpisz opis spotkania"
              id="description"
              name="description"
            ></StyledTextArea>

但我的问题是，当我在一个字母后开始输入时，我失去了文本区域的焦点，我必须再次单击才能填充下一个字母等。

因此，我使用gatsby-mdx插件从 MDX 文件创建站点。我想在 SitePage 对象和 Mdx 对象之间创建一个关联，以便我可以对 SitePage 边缘执行一个 graphQL 查询以构建站点导航。

我的大部分代码都在 TypeScript 中，所以如果您想知道 WTF 是什么类型的注释，请忽略任何类型注释。

我尝试过的事情

使用字段

我的第一个想法是使用onCreateNodeAPI，获取 MDX 节点，然后使用createNodeField操作将其添加到 SitePage 。这一切的伟大工程，但盖茨比，MDX插件增加了大量的其他信息，以它们的节点以后使用setFieldsOnGraphQLNodeTypeAPI（发生后的onCreateNodeAPI）。我希望这些字段（例如 frontmatter 和 tableOfContents）在以后的 graphql 查询中可用，但它们没有使用这种方法。

实现我自己的 setFieldsOnGraphQLNodeType

我想我可以像 gatsby-mdx 扩展 Mdx 节点一样扩展 SitePage 对象。

我在这里遇到的关键问题是我不知道如何创建 Mdx GraphQL 节点类型。

export const setFieldsOnGraphQLNodeType = ({type, actions, getNodes}: any, pluginOptions: any) => {
    if (type.name === "SitePage") {
        const {createParentChildLink} = actions
        return new Promise((resolve) => …

我想将文件发送到我的 Express 应用程序作为后端。我的问题是我的正文是作为类型发送的application/json，我想将其作为 a 发送form-data，然后使用multer-> https://github.com/expressjs/multer上传此文件

我不知道如何准备 fetch 调用以便稍后在 Express 中获取它。

    fetch('/api/data', {
  method: 'POST',
  headers: {
    Accept: 'application/form-data',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then((resp) => resp.json())
  .then((data) => console.log(data));

当我想登录req.fileapi 断点时，我得到了undefined.

app.post('/api/data', upload.single('cv'), (req, res) => {
  console.log(req.body);
  console.log(req.file);
  res.send({ name: 'Hello world!' });
});

我使用钩子存储表单中的反应数据，该对象如下所示：

{
   name: 'test',
   surname: 'test2',
   cv: 'C:\\fakepath\\Babel error.png'
}

我想在我的 React 应用程序中实现延迟加载，但大多数文件都是 JSON。当视口宽度小于例如 768px 时，它们中的一些正在加载，并且我不想在不需要它们时将它们加载到桌面应用程序中。有没有办法用 React.lazy() 加载 JSON 文件？

我的 JSON 文件是使用 Adob​​e After Effect 扩展生成的，名为：“Bodymovin”，后来我像这样导入这个文件：

import * as background from './background.json';
import * as backgroundLarge from './background-large.json';
import * as backgroundMedium from './background-medium.json';
import * as backgroundMobile from './background-mobile.json';
import * as backgroundSmallMobile from './background-smallMobile.json';
import * as tree from './tree.json';
import * as treeLarge from './tree-large.json';
import * as treeMedium from './tree-medium.json';
import * as treeMobile from './tree-mobile.json';
import * as treeSmallMobile from './tree-smallMobile.json';

我试图像使用默认导出的任何其他组件一样正常加载它，但它不起作用。

const treeMedium …

我想style-resources在新的 Nuxt 3 项目中全局配置和使用一些变量，但是当我将一些选项传递给 nuxt.config 文件时，我收到此错误：

Cannot start nuxt: resolver.resolveModule is not a function

我的依赖项：

  "devDependencies": {
    "nuxt3": "latest",
    "prettier": "^2.4.1"
  },
  "dependencies": {
    "@nuxtjs/style-resources": "^1.2.1",
    "sass": "^1.43.4"
  }

nuxt.config.js

export default defineNuxtConfig({
  css: ['~/assets/main.scss'],
  buildModules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: ['./assets/variables.scss'],
  },
});

我正在使用这个库： https ://github.com/nuxt-community/style-resources-module

我知道 Nuxt 3 仍处于 Beta 版本，但也许有人已经遇到了这个问题或者知道应用全局资源的不同方式

是否可以将扩展运算符与 React Native 中的样式组件一起使用？

我有这个组件：

const StyledHeaderText = styled.Text`
fontFamily: ${props => props.theme.font};
fontSize: ${props => props.theme.fontSizeSubtitle};
color: ${props => (props.lightMode) ? props.theme.fontColor : props.theme.fontPrimaryColor}
`;

但是可以说，在我的主题中，我有一个同时具有 fontFamily 和 fontSize 的对象，并且我在整个应用程序中都使用它。我想知道我是否可以做这样的事情，目前它不起作用：

const StyledHeaderText = styled.Text`
...${props => props.theme.fontHeader};
color: ${props => (props.lightMode) ? props.theme.fontColor : props.theme.fontPrimaryColor}
`;

例如，这在 iOS 中设置高程也很有用，因为我必须设置 4 种样式。

谢谢