我正在设置一个使用Webpack2,webpack-dev-middleware和HMR进行开发的React应用程序.每当我对React组件进行更改时,它都会按预期在浏览器中更新.我遇到的问题是,当我修改我的.scss文件,浏览器就不会更新.相反的是,在控制台中它给了我以下内容:
[HMR] bundle rebuilding
client.js:207 [HMR] bundle rebuilt in 1567ms
process-update.js:27 [HMR] Checking for updates on the server...
process-update.js:98 [HMR] Nothing hot updated.
process-update.js:107 [HMR] App is up to date.
在此之后,当我刷新页面时,我的样式会发生变化.我不完全确定发生了什么或问题源于何处,但希望得到一些帮助和澄清.下面是我的设置:
Webpack.config.js
var webpack = require('webpack');
var path = require('path');
var autoprefixer = require('autoprefixer');
var DashboardPlugin = require('webpack-dashboard/plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var argv = require('yargs').argv;
const config = {};
// This configured production
if (argv.p) {
config.entry = [
'./src/client/scripts/index',
'./src/client/scripts/utils/index',
'./src/client/styles/index.scss'
]
config.plugins = [
new …我正在使用React Router 4在基本级别上实现服务器端渲染，以了解其工作原理。但是，我遇到了一些问题，React Router提供的文档尚不清楚如何解决它们：
1）我在/ server / routes中的上下文变量未定义。
我在以前的教程中已经看到React Router曾经使用过createServerRenderContext（）; 但是在他们的文档中没有任何提及，所以我假设他们摆脱了它。我以为StaticRouter应该在渲染时为您创建上下文？如何定义上下文？
2）我的html变量（将StaticRouter呈现为字符串）在控制台中显示了这两个错误：
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined …javascript node.js single-page-application reactjs react-router
我理解数据绑定在这个简单的例子中是如何工作的,但是我很好奇你如何限制输出只显示你输入的任何数字的最后4个字符,而不是整个数字:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="number" placeholder="Enter a long number here">
<hr>
<h1>Hello {{number}}!</h1>
</div>
</body>
</html>
你会怎么做呢？
我正在构建一个可扩展的移动菜单图标,并且:after伪类不起作用.这是为了创建3条黑线来表示"汉堡包"菜单图标.创建第一行,第二行使用:before伪类创建,但是:after伪类不渲染,因此第三条黑线不会出现.
JS小提琴 - https://jsfiddle.net/eeks1swx/
我不完全确定为什么,我似乎无法弄明白.有什么想法吗？
.hamburger {
height: 15px;
width: 20px;
position: relative;
display: block;
cursor: pointer;
box-sizing: border-box;
}
.hamburger__line:before,
.hamburger__line:after,
.hamburger__line {
position: absolute;
height: 20%;
background-color: #000;
width: 100%;
border-left: 0;
border-right: 0;
top: 40%;
}
.hamburger__line:before,
.hamburger__Line:after {
content: "";
height: 100%;
}
.hamburger__line:before {
top: -200%;
}
.hamburger__line:after {
top: 200%;
}<div class="hamburger">
<div class="hamburger__line"></div>
</div>