那些遇到过的问题

小编Smi*_*thy的帖子

部署时Heroku上"找不到模块"错误

所以,我正在使用React创建一个应用程序,然后我将它部署到Heroku.一切都在localhost中运行良好,没有任何错误,webpack也编译没有错误.我也在Heroku上设置了env变量.

但是,当我将它部署到Heroku时,我得到一个空白的屏幕,并在控制台中出现此错误(我正确地要求TodoApi并尝试了各种方式 - 导入等,它在localhost中工作没有问题):

我试图找出它好几天,所以任何帮助都非常感谢.

Uncaught Error: Cannot find module "TodoApi"
    at bundle.js:20
    at Object.<anonymous> (bundle.js:20)
    at t (bundle.js:1)
    at Object.<anonymous> (bundle.js:20)
    at t (bundle.js:1)
    at Object.<anonymous> (bundle.js:3)
    at Object.<anonymous> (bundle.js:3)
    at t (bundle.js:1)
    at Object.<anonymous> (bundle.js:1)
    at t (bundle.js:1)
Run Code Online (Sandbox Code Playgroud)

这是我的webpack和package.json文件:

var webpack = require('webpack');
var path = require('path');
var envFile = require('node-env-file');

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

try {
    envFile(path.join(__dirname, 'config/' + process.env.NODE_ENV + '.env'));
} catch(e) {

}

module.exports = {
  entry: [
    'script!jquery/dist/jquery.min.js',
    'script!foundation-sites/dist/js/foundation.min.js',
    './app/app.jsx'
  ],
  externals: …
Run Code Online (Sandbox Code Playgroud)

javascript heroku webpack

Smi*_*thy
2017 05-16
11
推荐指数
1
解决办法
1294
查看次数

从 JS 脚本创建一个可嵌入的“小部件”

我希望能够使用一行代码将通过此片段创建的内容嵌入到我喜欢的任何地方 - 与您在某处获取任何类型的片段相同的方式，以便它呈现 或类似的iframe回报。我不知道从哪里开始，如果我已经拥有的可以使用/准备好“转换”为可嵌入的片段。我浏览了一些教程，但它非常令人困惑，因为它使用了一些我不太理解的后端内容......

显然，它应该托管在某个地方，但我需要“调用”代码片段的部分对我来说并不是很清楚。现在，它出现在我的网站上的任何地方，因为它只是一个被包含的普通 JS 文件，与所有其他文件一样。

如果我能以某种方式打包它并像这样调用它，那就太好了：

<script src="link-to-my-snippet.js"></script>
Run Code Online (Sandbox Code Playgroud)

如果有人可以指导我一点那就太好了。

<script src="link-to-my-snippet.js"></script>
Run Code Online (Sandbox Code Playgroud)

javascript embed jquery ecmascript-6

Smi*_*thy
lucky-day
7
推荐指数
1
解决办法
2万
查看次数

反应独特的“键”错误

我正在阅读 React 中的待办事项列表教程并遇到以下错误，我花了很长时间却找不到错误..这是错误和组件的代码，这是代码对于课程回购（此提交出现问题）：

https://github.com/andrewjmead/react-course-todo-app/commit/0521f151705f78cb9f8d69262eb093f1431cb9ca

非常感谢任何帮助。

警告：数组或迭代器中的每个子元素都应该有一个唯一的“key”属性。检查 的渲染方法TodoList。有关更多信息，请参阅 fb.me/react-warning-keys。

在 TOGGLE_TODO 的情况下，对于扩展运算符，终端也存在错误 

return {
...todo, // here
completed: nextCompleted,
completedAt: nextCompleted ? moment().unix() : undefined
};

var React = require('react');
var { connect } = require('react-redux');
import Todo from 'Todo';
var TodoAPI = require('TodoAPI');

export var TodoList = React.createClass ({
    render: function() {
        var { todos, showCompleted, searchText } = this.props;
        var renderTodos = () => {
            if(todos.length === 0) {
                return (
                    <p className="container__message">No tasks</p>
                );
            }
            return …
Run Code Online (Sandbox Code Playgroud)

reactjs react-redux

Smi*_*thy
2017 04-28
5
推荐指数
1
解决办法
7105
查看次数

形状与图像上的文本

所以我想使用CSS在图像上放置一个三角形,恰好是一个包含一些文本的三角形.像这样的东西:

https://sketch.io/render/sk-11fa7e2aeba09cb08372f831f84d9af2.jpeg 在此输入图像描述

我有点卡住了,所以这就是我现在所得到的:

.image {
    background: url('../image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;

    & .text {
        position: absolute;
        background-color: #FFF;
        bottom: 0;
        right: 0;
        padding: 10px 20px;
    }
}

<div class="image">
    <span class="text">
        <p>Text here</p>
        <p>And here</p>
    </span>
</div>
Run Code Online (Sandbox Code Playgroud)

如何旋转/倾斜/缩小盒子的左侧..？

非常感谢您的帮助!

css

Smi*_*thy
2017 07-25
5
推荐指数
1
解决办法
259
查看次数

用SVG图形替换mat-icon

Angular新手在这里..有人可以指导我正确的方法，如何用定制的图标正确地替换现有的Material图标，更确切地说是SVG图形？像这样：

所以这：

<mat-icon class="mat-icon-rtl-mirror">
     {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
Run Code Online (Sandbox Code Playgroud)

有了这个：

<mat-icon class="mat-icon-rtl-mirror">
     {{nestedTreeControl.isExpanded(node) ? 'INSERT_SVG_1_HERE' : 'INSERT_SVG_2_HERE'}}
</mat-icon>
Run Code Online (Sandbox Code Playgroud)

javascript angular-material angular

Smi*_*thy
lucky-day
5
推荐指数
1
解决办法
3042
查看次数

使复选框、选择和输入字段内联

我正在尝试制作一个搜索栏，其中绿色 div 位于灰色 div 的中间（请参阅http://codepen.io/anon/pen/LRBEvq?editors=1100）和复选框，选择下拉菜单，然后输入字段全部内联有两个按钮 - 所以所有内容都在同一行。我正在使用 Bootstrap 使其具有响应能力，但卡住了并且无法弄清楚..感谢您的所有帮助！

这是我的html：

.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  margin: 0 auto;
}
.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
}
button {
  height: 37px;
  width: 160px;
}
.choice {
  background-color: lightgrey;
  height: 37px;
}
.checkbox {
  width: 207px;
  border: 1px solid white;
}
.choice-select {
  width: 173px;
}
.choice-input {
  width: 390px;
}
Run Code Online (Sandbox Code Playgroud) 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem …
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

Smi*_*thy
2016 10-24
4
推荐指数
1
解决办法
2万
查看次数

如何覆盖box-sizing:border-box; 在特定部分

我有一个*{box-sizing:border-box;}属性,可以使联系表单输入保持良好且分离,但它使得它上面的小"画廊"稍微偏离中心向左移动,我找不到如何为特定部分覆盖它..我已经尝试将其定位并将框大小设置为内容框但似乎没有任何效果.我错过了什么..？

对不起这里的长段代码,我不想错过什么.

这是我的代码和Codepen:http://codepen.io/anon/pen/zKXzZP

<body>
      <section class="works">
        <div class="works--title">
          Stuff
          <hr class="horizontal">
        </div>
        <div class="works--thumbnails">
          <a href="#" class="works--item">
            <div class="works--itemtext">
              <div class="item--primarytext">
                lorem lorem lorem lorem lorem
              </div>
              <div class="item--secondarytext">
                lorem lorem lorem lorem lorem
              </div>
            </div>
          </a>
          <a href="#" class="works--item">
            <div class="works--itemtext">
              <div class="item--primarytext">
                Lorem ipsum dolor sit amet
              </div>
              <div class="item--secondarytext">
                similique nesciunt sint
              </div>
            </div>
          </a>
          <a href="#" class="works--item">
            <div class="works--itemtext">
              <div class="item--primarytext">
                Lorem ipsum dolor sit amet
              </div>
              <div class="item--secondarytext">
                similique nesciunt sint
              </div>
            </div> …
Run Code Online (Sandbox Code Playgroud)

css box-sizing

Smi*_*thy
lucky-day
3
推荐指数
1
解决办法
3420
查看次数

使用CSS滑动按钮/菜单

这是容量为300px宽度的六个按钮.正如您所看到的那样,由于缺乏预期的空间,按钮会跳进新的行.我想知道是否有办法将按钮保持在一行,但有可能在移动设备上向右滑动它们吗？框阴影表示右侧有更多按钮.

.wrap {
  width: 300px;
  box-shadow: 8px -5px 20px 0px lightgrey;
}

button {
  display: inline-block;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="wrap">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
  <button>Button 5</button>
  <button>Button 6</button>
</div>
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

Smi*_*thy
lucky-day
1
推荐指数
1
解决办法
444
查看次数

如何在中间设置图像和文字<hr>的样式？

因此,我正在设计这个水平线,中间的图像和文字的想法,并卡住了.我如何在"TEXT"左侧对齐图像而不在其下方？这是演示当前状态的链接:

http://codepen.io/anon/pen/MJWJad

感谢所有的帮助.

.horizontal__rule--modified {
  line-height: 1em;
  position: relative;
  border: 0;
  color: #666666;
  text-align: center;
  height: 1.5em;
  opacity: 0.7;
  letter-spacing: 1px;
  font-size: 16px;
  &:before {
    content: url(http://www.metalguitarist.org/forum/images/mgtwitter.png);
    background: red;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
  }
  &:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: black;
    padding: 0 .5em;
    line-height: 1.5em;
    color: red;
    background-color: #fcfcfa;
  }
}

<hr class="horizontal__rule--modified" data-content="TEXT">
Run Code Online (Sandbox Code Playgroud)

html css pseudo-element

Smi*_*thy
lucky-day
0
推荐指数
1
解决办法
640
查看次数

初始化许多变量时如何减少代码量

所以我在SVG里面有很多元素,比方说30,它们都有相应的类,比如.el01, .el02, .el03......最多.el30.

我需要为每个变量创建一个变量,以便按顺序使用它,但是编写类似的东西会变得非常繁琐:

var el01 = $(".el01"),
    el02 = $(".el02"),
    ...
    el30 = $(".el30");
Run Code Online (Sandbox Code Playgroud)

有没有办法减少代码量,并通过某种循环键入这里,但仍然能够使用所有想要的变量？

javascript jquery loops

Smi*_*thy
lucky-day
0
推荐指数
1
解决办法
68
查看次数

用类似textarea的样式装饰输入字段

也许这是一个奇怪的问题,但有可能装饰输入字段的右下角有这两条窄线,这是textarea字段中的默认值吗？所以它只是关于装饰,不需要相同的功能.

笔:https://codepen.io/anon/pen/wxqpXK

input {
      border-top: none;
      border-left: none;
      border-right: none;
    }
Run Code Online (Sandbox Code Playgroud) 
<input type="text" placeholder="Input text">
    
<textarea name="" id="" cols="30" rows="10"></textarea>
Run Code Online (Sandbox Code Playgroud)

html css input

Smi*_*thy
2018 07-26
0
推荐指数
1
解决办法
103
查看次数

编写 ngClass 条件的更好方法

我正在想一种更简洁的方式来写这个条件：

    [ngClass]="{
      'class1':
        image.isAvailable && (image.property !== true && !null),
      'class2':
        image.isAvailable && (image.property === true && !null)
    }"
Run Code Online (Sandbox Code Playgroud)

所以 image.property 有时可能为 NULL，我正在尝试处理它......我知道我错过了一些明显的东西，但不知道是什么。非常感谢任何帮助

javascript typescript angular

Smi*_*thy
lucky-day
0
推荐指数
1
解决办法
75
查看次数

标签 统计

css ×6

javascript ×6

html ×4

jquery ×3

angular ×2

angular-material ×1

box-sizing ×1

ecmascript-6 ×1

embed ×1

heroku ×1

input ×1

loops ×1

pseudo-element ×1

react-redux ×1

reactjs ×1

twitter-bootstrap ×1

typescript ×1

webpack ×1