小编smb*_*smb的帖子

Bootstrap 4更改断点

我有一个应用程序,其中设计需要从桌面到平板电脑的1280断点,或者xl到lg.但是,Bootstrap本身的xl断点为1200.

我需要为引导程序全局更改xl断点.我是否必须从源文件重新编译Bootstrap 4?

我尝试使用我的Sass构建设置:

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1280px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);
Run Code Online (Sandbox Code Playgroud)

但是,xl全局的断点没有任何改变,它仍然会在1200px宽度处进行中断.

css sass responsive-design twitter-bootstrap bootstrap-4

25
推荐指数
3
解决办法
2万
查看次数

带有 .env.product 的 NextJS Docker 容器

当使用 .env.local 测试和使用我的 NextJS 应用程序时,一切都很好。但是,当我进行生产构建来部署时,它找不到 .env.Production 值(即使它现在是 .env.local 的精确副本)。当我添加执行 console.log(process.env) 的端点时,不存在任何 .env.Production 值。

这是我的Dockerfile

# Install dependencies only when needed
FROM node:alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# Rebuild the source code only when needed
FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN yarn build && yarn install --production --ignore-scripts --prefer-offline …
Run Code Online (Sandbox Code Playgroud)

node.js docker next.js

11
推荐指数
1
解决办法
2万
查看次数

使用PHPUnit对Laravel控制器内部进行单元测试

我不太确定在这种情况下采用单元测试的方法.没有单元测试Guzzle的例子对我来说在这种情况下如何实现是非常有意义的,或者我可能只是错误地一起看它.

设置:Laravel 4.2 REST API - 控制器方法在方法中使用Guzzle从另一个api请求数据,如下所示:

<?php

class Widgets extends Controller {
    public function index(){
        // Stuff

        $client = new GuzzleHttp\Client();
        $url = "api.example.com";

        $response = $client->request('POST', $url, ['body' => array(...)]);

        // More stuff
    }
}

?>
Run Code Online (Sandbox Code Playgroud)

我以为我可以按照以下方式进行单元测试,一切都会正常工作.

function testGetAllWidgets(){
    $mock_response = array('foo' => 'bar');

    $mock = new MockHandler([
        new Response(200, $mock_response),
    ]);

    $handler = HandlerStack::create($mock);
    $client = new Client(['handler' => $handler]);

    $response = $this->call('GET', '/widgets');

    // Do asserts, etc.
}
Run Code Online (Sandbox Code Playgroud)

但是,Guzzle仍在向外部服务发出实际的HTTP请求.我的猜测可能是在Controller方法中设置客户端创建以使用$ handler,但我无法想象这是正确的方法.我错过了什么?

编辑 我的解决方案最终如下:

这个解决方案感觉最正确,而且是Laravel方式.(参见IoC容器)

我会在每个api调用上面添加这个(根据在api调用中需要模拟多少外部调用来更改模拟响应). …

php phpunit unit-testing laravel guzzle

5
推荐指数
1
解决办法
5490
查看次数

React 热重载添加具有高 z-index 的 iFrame,除非删除 dom 元素,否则无法点击

每当我保存并 React 热重新加载应用程序时,就会注入一个具有高 z-index 的 iframe,这使得 UI 不可点击。

我必须打开开发工具并删除该元素,或者必须刷新 UI 才能再次正常工作。

如果我删除 dom 元素,它不会尝试再次添加到 UI 中,除非我刷新并且有另一个热重新加载。使用隐身模式或不使用扩展名会产生相同的结果。

iframe 和正在注入的代码

reactjs

5
推荐指数
1
解决办法
1545
查看次数

Jest 和文件加载器导入

我目前正在使用文件加载器在反应应用程序(CRA)中的一个文件中导入一个模块:

"file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.min.js"
Run Code Online (Sandbox Code Playgroud)

运行 Jest 时,会抛出以下错误:

Cannot find module 'file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.min.js'
Run Code Online (Sandbox Code Playgroud)

我通过设置 modulePathIgnorePatterns 和 moduleNameMapper 尝试在 Jest 的 package.json 中进行不同的配置,但这两种配置设置都不起作用:

"modulePathIgnorePatterns": [
        "file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.min.js"
      ]
Run Code Online (Sandbox Code Playgroud)
"moduleNameMapper": {
        "file-loader?name=scripts/[name].[hash].js!jsstore/dist/jsstore.worker.min.js": "<rootDir>/node_modules/jsstore/dist/jsstore.worker.min.js"
      }
Run Code Online (Sandbox Code Playgroud)

reactjs webpack jestjs

4
推荐指数
1
解决办法
2124
查看次数

OS X Lion与xampp + rails + mysql2 gem

我试图弄清楚如何使用XAMPP安装的MySQL获得OS X Lion以使用rails中的mysql2 gem.

这是我尝试过的:

  • 安装了XAMPP Dev Kit
  • 使用port和brew安装mysql5-server.我现在已经卸载了这两个.因为它没有解决问题.
  • 从DMG文件安装mysql5社区版.现在已卸载,因为它没有解决问题.
  • 下载32位版本的mysql5社区版作为tar.提取的文件夹为'/ var/mysql'

这是我正在运行以尝试安装它的命令:

gem install mysql2 -- --with-mysql-dir=/var/mysql --with-mysql-include=
/var/mysql/include --with-mysql-lib=/var/mysql/lib --with-mysql-config=
/Applications/XAMPP/xamppfiles/bin/mysql_config
Run Code Online (Sandbox Code Playgroud)

我不知道如何让它发挥作用.我唯一能想到的是,我不知何故没有正确指向目录.我试过从with-mysql-include,with-mysql-dir和with-mysql-lib配置选项中删除/ include /,/ mysql /和/ lib /.没有运气.我已经尝试将它们指向XAMPP安装.还没有运气.

返回的错误是:

ERROR: Error installing mysql2:
ERROR: Failed to build gem native extension.

/Users/user/.rvm/rubies/ruby-1.9.3-p194/bin/ruby extconf.rb --with-mysql-dir=/var/mysql --with-mysql-include=/var/mysql/include --with-mysql-lib=/var/mysql --with-mysql-config=/Applications/XAMPP/xamppfiles/bin/mysql_config
checking for rb_thread_blocking_region()... yes
checking for rb_wait_for_single_fd()... yes
checking for mysql.h... no
checking for mysql/mysql.h... no
-----
mysql.h is missing.  please check your installation of mysql and try again.
-----
*** extconf.rb …
Run Code Online (Sandbox Code Playgroud)

ruby mysql xampp mysql2 ruby-on-rails-3

1
推荐指数
1
解决办法
1136
查看次数

React 功能组件渲染旧数据

我试图将一段代码设置到它自己的组件中,但是,这样做后数据不会显示:

代码 StackBlitz 示例

缺失数据概述

正如您从图片中看到的,组件设置的两个输入都是空白的。我假设这可能与关闭有关,但我不确定,而且更困惑如何解决这个问题。

应用程序.tsx

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { SimpleTable } from './components/SimpleTable/SimpleTable';
import ITableCol from './components/SimpleTable/ITableCol';

interface IItem {
  userId: number;
  id: number;
  title: string;
  body: string;
}

interface IIdItem {
  [key: string]: number;
}

export const App = () => {
  const getItems = async () => {
    const res = await axios.get('https://jsonplaceholder.typicode.com/posts');

    const twoItems = [res.data[0], res.data[1]];

    setItems(twoItems);
  };

  const getTableCols = (): ITableCol[] => { …
Run Code Online (Sandbox Code Playgroud)

reactjs react-functional-component

-1
推荐指数
1
解决办法
484
查看次数