Skip to content

Instantly share code, notes, and snippets.

@waliurjs
Last active October 27, 2016 10:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save waliurjs/f513b23fa1526021b6f9866884c499f2 to your computer and use it in GitHub Desktop.
Save waliurjs/f513b23fa1526021b6f9866884c499f2 to your computer and use it in GitHub Desktop.
icomoon webpack problem
/* This file is imported in the component's .scss file */
/* loads Lato font correctly */
@import "../../theme/fonts/fonts.scss";
/* Loads and links css classes to html correctly(checked in chrome console) but displays squarebox in the browser */
@import "../../theme/icons/icomoon.scss";
@import "../../theme/projectname/common.scss"; /* works */
@import "../../theme/variables.scss"; /* works */
require('babel-polyfill');
// Webpack config for development
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var assetsPath = path.resolve(__dirname, '../static/dist');
var host = (process.env.HOST || 'localhost');
var port = (+process.env.PORT + 1) || 3001;
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
var babelrc = fs.readFileSync('./.babelrc');
var babelrcObject = {};
try {
babelrcObject = JSON.parse(babelrc);
} catch (err) {
console.error('==> ERROR: Error parsing your .babelrc.');
console.error(err);
}
var babelrcObjectDevelopment = babelrcObject.env && babelrcObject.env.development || {};
// merge global and dev-only plugins
var combinedPlugins = babelrcObject.plugins || [];
combinedPlugins = combinedPlugins.concat(babelrcObjectDevelopment.plugins);
var babelLoaderQuery = Object.assign({}, babelrcObjectDevelopment, babelrcObject, {plugins: combinedPlugins});
delete babelLoaderQuery.env;
// Since we use .babelrc for client and server, and we don't want HMR enabled on the server, we have to add
// the babel plugin react-transform-hmr manually here.
// make sure react-transform is enabled
babelLoaderQuery.plugins = babelLoaderQuery.plugins || [];
var reactTransform = null;
for (var i = 0; i < babelLoaderQuery.plugins.length; ++i) {
var plugin = babelLoaderQuery.plugins[i];
if (Array.isArray(plugin) && plugin[0] === 'react-transform') {
reactTransform = plugin;
}
}
if (!reactTransform) {
reactTransform = ['react-transform', {transforms: []}];
babelLoaderQuery.plugins.push(reactTransform);
}
if (!reactTransform[1] || !reactTransform[1].transforms) {
reactTransform[1] = Object.assign({}, reactTransform[1], {transforms: []});
}
// make sure react-transform-hmr is enabled
reactTransform[1].transforms.push({
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module']
});
module.exports = {
devtool: 'inline-source-map',
context: path.resolve(__dirname, '..'),
entry: {
'main': [
'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
'bootstrap-sass!./src/theme/bootstrap.config.js',
'./src/client.js'
]
},
output: {
path: assetsPath,
filename: '[name]-[hash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: 'http://' + host + ':' + port + '/dist/'
},
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.less$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
{ test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
{ test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
]
},
progress: true,
resolve: {
modulesDirectories: [
'src',
'node_modules'
],
extensions: ['', '.json', '.js', '.jsx']
},
plugins: [
// hot reload
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/webpack-stats\.json$/),
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: true,
__DEVTOOLS__: false // <-------- DISABLE redux-devtools HERE
}),
webpackIsomorphicToolsPlugin.development()
]
};
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on October 26, 2016 */
@font-face {
font-family: 'Lato';
src: url('/theme/fonts/lato-regular.eot');
src: url('/theme/fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
url('/theme/fonts/lato-regular.woff2') format('woff2'),
url('/theme/fonts/lato-regular.woff') format('woff'),
url('/theme/fonts/lato-regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Lato';
src: url('/theme/fonts/lato-italic.eot');
src: url('/theme/fonts/lato-italic.eot?#iefix') format('embedded-opentype'),
url('/theme/fonts/lato-italic.woff2') format('woff2'),
url('/theme/fonts/lato-italic.woff') format('woff'),
url('/theme/fonts/lato-italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: url('/theme/fonts/lato-bolditalic.eot');
src: url('/theme/fonts/lato-bolditalic.eot?#iefix') format('embedded-opentype'),
url('/theme/fonts/lato-bolditalic.woff2') format('woff2'),
url('/theme/fonts/lato-bolditalic.woff') format('woff'),
url('/theme/fonts/lato-bolditalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'Lato';
src: url('/theme/fonts/lato-bold.eot');
src: url('/theme/fonts/lato-bold.eot?#iefix') format('embedded-opentype'),
url('/theme/fonts/lato-bold.woff2') format('woff2'),
url('/theme/fonts/lato-bold.woff') format('woff'),
url('/theme/fonts/lato-bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
import React, { Component } from 'react';
// import { IndexLink } from 'react-router';
import { LinkContainer } from 'react-router-bootstrap';
import classNames from 'classnames';
export default class Header extends Component {
render() {
const logo2x = require('../../../static/logo/projectname@2x.png');
const css = require('./Header.scss');
return (
<div className={classNames(css.headerContainer, css.backgroundWhite)}>
<div className="container">
<div className="row">
<div className="col-xs-6 col-sm-4 col-md-2 clearfix">
<LinkContainer to="/">
<img className={classNames(css.logoImage, css.retina)} src={logo2x} />
</LinkContainer>
</div>
<div className="col-xs-6 col-sm-8 col-md-10">
<div className="clearfix">
<p className={classNames(css.supportText, 'hidden-xs')}>
<span className={css['icon-phone']}></span> <------ sets [ content: "\e61c"; ] correctly.
</p>
</div>
</div>
</div>
</div>
</div>
);
}
}
@import "../../theme/projectname/base.scss";
.supportText {
float: right;
font-size: 14px;
color: #4a4a4a;
text-align: right;
padding: 2px 25px 2px 0px;
margin-bottom: 0;
}
.supportText .icon-phone {
color: #f37032;
}
.supportText b {
font-weight: 700;
color: #F37032;
}
/* Extra Small Devices, Phones */
@media only screen and (min-width: 320px) {
.headerContainer{
padding: 15px 0;
}
.logoImage{
max-height: 35px;
margin-top: 8px;
}
}
/* Tablets */
@media only screen and (min-width: 768px) {
.headerContainer{
padding: 25px 0;
}
.logoImage{
max-height: 45px;
margin-top: 0;
}
}
@font-face {
font-family: 'icomoon';
src: url('/theme/icons/icomoon.eot');
src: url('/theme/icons/icomoon.eot') format('embedded-opentype'),
url('/theme/icons/icomoon.ttf') format('truetype'),
url('/theme/icons/icomoon.woff') format('woff'),
url('/theme/icons/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-checkmark2:before {
content: "\e910";
}
.icon-checkmark:before {
content: "\e90e";
}
.icon-radio-checked:before {
content: "\e602";
}
.icon-radio-unchecked:before {
content: "\e603";
}
.icon-blogger:before {
content: "\e604";
}
.icon-mobile:before {
content: "\e605";
}
.icon-feed:before {
content: "\e606";
}
.icon-fork-andknife:before {
content: "\e607";
}
.icon-loop:before {
content: "\e608";
}
.icon-clock:before {
content: "\e609";
}
.icon-zoom-out:before {
content: "\e60a";
}
.icon-zoom-in:before {
content: "\e60b";
}
.icon-checkbox-unchecked:before {
content: "\e60c";
}
.icon-checkbox-partial:before {
content: "\e60d";
}
.icon-plus-alt:before {
content: "\e60e";
}
.icon-plus:before {
content: "\e60f";
}
.icon-minus:before {
content: "\e610";
}
.icon-users:before {
content: "\e611";
}
.icon-image:before {
content: "\e612";
}
.icon-home:before {
content: "\e613";
}
.icon-phone2:before {
content: "\e614";
}
.icon-hamburger:before {
content: "\e615";
}
.icon-user:before {
content: "\e616";
}
.icon-facebook:before {
content: "\e617";
}
.icon-twitter:before {
content: "\e618";
}
.icon-arrow-left:before {
content: "\e619";
}
.icon-arrow-right:before {
content: "\e61a";
}
.icon-list:before {
content: "\e61b";
}
.icon-phone:before {
content: "\e61c";
}
.icon-newspaper:before {
content: "\e61d";
}
.icon-caret-down:before {
content: "\e61e";
}
.icon-caret-up:before {
content: "\e61f";
}
.icon-uniE620:before {
content: "\e620";
}
.icon-filter:before {
content: "\e621";
}
.icon-sort:before {
content: "\e622";
}
.icon-chevron-left:before {
content: "\e623";
}
.icon-chevron-right:before {
content: "\e624";
}
.icon-shopping-cart:before {
content: "\e625";
}
.icon-coin:before {
content: "\e626";
}
.icon-tag:before {
content: "\e627";
}
.icon-file:before {
content: "\e628";
}
.icon-chat-3:before {
content: "\e629";
}
.icon-bill:before {
content: "\e62a";
}
.icon-map-marker:before {
content: "\e62b";
}
.icon-search:before {
content: "\e62c";
}
.icon-heart:before {
content: "\e62d";
}
.icon-truck:before {
content: "\e62e";
}
.icon-youtube-play:before {
content: "\e62f";
}
.icon-uniE630:before {
content: "\e630";
}
.icon-food:before {
content: "\e631";
}
.icon-earth:before {
content: "\e632";
}
.icon-cog:before {
content: "\e633";
}
.icon-googleplus:before {
content: "\e634";
}
.icon-key:before {
content: "\e635";
}
.icon-mail:before {
content: "\e636";
}
.icon-cross:before {
content: "\e90c";
}
.icon-time-slot:before {
content: "\e90b";
}
.icon-file-text:before {
content: "\e90d";
}
.icon-images:before {
content: "\e90a";
}
.icon-share:before {
content: "\e907";
}
.icon-stopwatch:before {
content: "\e908";
}
.icon-compass:before {
content: "\e909";
}
.icon-star-half:before {
content: "\e600";
}
.icon-star:before {
content: "\e601";
}
.icon-office:before {
content: "\e900";
}
.icon-location:before {
content: "\e901";
}
.icon-spoon-knife:before {
content: "\e904";
}
.icon-info:before {
content: "\e906";
}
.icon-notification:before {
content: "\e90f";
}
.icon-commenting-o:before {
content: "\e905";
}
.icon-heart-o:before {
content: "\e902";
}
.icon-heart2:before {
content: "\e903";
}
/* Classes */
src/theme/icons/icomoon.scss
/* Icons */
src/theme/icons/icomoon.eot
src/theme/icons/icomoon.svg
src/theme/icons/icomoon.ttf
src/theme/icons/icomoon.woff
{
"name": "react-redux-universal-hot-example",
"description": "Example of an isomorphic (universal) webapp using react redux and hot reloading",
"author": "Erik Rasmussen <rasmussenerik@gmail.com> (http://github.com/erikras)",
"license": "MIT",
"version": "0.9.0",
"repository": {
"type": "git",
"url": "https://github.com/erikras/react-redux-universal-hot-example"
},
"homepage": "https://github.com/erikras/react-redux-universal-hot-example",
"keywords": [
"react",
"isomorphic",
"universal",
"webpack",
"express",
"hot reloading",
"react-hot-reloader",
"redux",
"starter",
"boilerplate",
"babel"
],
"main": "bin/server.js",
"scripts": {
"start": "concurrent --kill-others \"npm run start-prod\" \"npm run start-prod-api\"",
"start-prod": "better-npm-run start-prod",
"start-prod-api": "better-npm-run start-prod-api",
"build": "better-npm-run build",
"postinstall": "npm run build",
"lint": "eslint -c .eslintrc src api",
"start-dev": "better-npm-run start-dev",
"start-dev-api": "better-npm-run start-dev-api",
"watch-client": "better-npm-run watch-client",
"dev": "concurrent --kill-others \"npm run watch-client\" \"npm run start-dev\" \"npm run start-dev-api\"",
"test": "karma start",
"test-node": "./node_modules/mocha/bin/mocha $(find api -name '*-test.js') --compilers js:babel-core/register",
"test-node-watch": "./node_modules/mocha/bin/mocha $(find api -name '*-test.js') --compilers js:babel-core/register --watch"
},
"betterScripts": {
"start-prod": {
"command": "node ./bin/server.js",
"env": {
"NODE_PATH": "./src",
"NODE_ENV": "production",
"PORT": 8080,
"APIPORT": 3030
}
},
"start-prod-api": {
"command": "node ./bin/api.js",
"env": {
"NODE_PATH": "./api",
"NODE_ENV": "production",
"APIPORT": 3030
}
},
"start-dev": {
"command": "node ./bin/server.js",
"env": {
"NODE_PATH": "./src",
"NODE_ENV": "development",
"PORT": 3000,
"APIPORT": 3030
}
},
"start-dev-api": {
"command": "node ./bin/api.js",
"env": {
"NODE_PATH": "./api",
"NODE_ENV": "development",
"APIPORT": 3030
}
},
"watch-client": {
"command": "node webpack/webpack-dev-server.js",
"env": {
"UV_THREADPOOL_SIZE": 100,
"NODE_PATH": "./src",
"PORT": 3000,
"APIPORT": 3030
}
},
"build": {
"command": "webpack --verbose --colors --display-error-details --config webpack/prod.config.js",
"env": {
"NODE_ENV": "production"
}
}
},
"dependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.1",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-display-name": "^6.3.13",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babel-register": "^6.3.13",
"babel-runtime": "^6.3.19",
"body-parser": "^1.14.1",
"classnames": "^2.2.5",
"compression": "^1.6.0",
"express": "^4.13.3",
"express-session": "^1.12.1",
"file-loader": "^0.8.5",
"hoist-non-react-statics": "^1.0.3",
"http-proxy": "^1.12.0",
"invariant": "^2.2.0",
"less": "^2.5.3",
"less-loader": "^2.2.1",
"lru-memoize": "^1.0.0",
"map-props": "^1.0.0",
"multireducer": "^2.0.0",
"piping": "^0.3.0",
"pretty-error": "^1.2.0",
"react": "^0.14.2",
"react-bootstrap": "^0.28.1",
"react-dom": "^0.14.1",
"react-helmet": "^2.2.0",
"react-inline-css": "^2.0.0",
"react-redux": "^4.0.0",
"react-router": "2.0.0",
"react-router-bootstrap": "^0.20.1",
"react-router-redux": "^4.0.0",
"redux": "^3.0.4",
"redux-async-connect": "^1.0.0-rc2",
"redux-form": "^3.0.12",
"scroll-behavior": "^0.3.2",
"serialize-javascript": "^1.1.2",
"serve-favicon": "^2.3.0",
"socket.io": "^1.3.7",
"socket.io-client": "^1.3.7",
"superagent": "^1.4.0",
"url-loader": "^0.5.7",
"warning": "^2.1.0",
"webpack-isomorphic-tools": "^2.2.18"
},
"devDependencies": {
"autoprefixer-loader": "^3.1.0",
"babel-eslint": "^5.0.0-beta6",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-typecheck": "^3.6.0",
"better-npm-run": "0.0.8",
"bootstrap-sass": "^3.3.5",
"bootstrap-sass-loader": "^1.0.9",
"chai": "^3.3.0",
"clean-webpack-plugin": "^0.1.6",
"concurrently": "^0.1.1",
"css-loader": "^0.23.1",
"eslint": "1.10.3",
"eslint-config-airbnb": "0.1.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-import": "^0.8.0",
"eslint-plugin-react": "^3.5.0",
"extract-text-webpack-plugin": "^0.9.1",
"json-loader": "^0.5.4",
"karma": "^0.13.10",
"karma-cli": "^0.1.1",
"karma-mocha": "^0.2.0",
"karma-mocha-reporter": "^1.1.1",
"karma-phantomjs-launcher": "^0.2.1",
"karma-sourcemap-loader": "^0.3.5",
"karma-webpack": "^1.7.0",
"mocha": "^2.3.3",
"node-sass": "^3.4.2",
"phantomjs": "^1.9.18",
"phantomjs-polyfill": "0.0.1",
"react-a11y": "^0.2.6",
"react-addons-test-utils": "^0.14.0",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.1",
"redbox-react": "^1.1.1",
"redux-devtools": "^3.0.0-beta-3",
"redux-devtools-dock-monitor": "^1.0.0-beta-3",
"redux-devtools-log-monitor": "^1.0.0-beta-3",
"sass-loader": "^3.1.2",
"sinon": "^1.17.2",
"strip-loader": "^0.1.0",
"style-loader": "^0.13.0",
"timekeeper": "0.0.5",
"webpack": "^1.12.9",
"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.5.0"
},
"engines": {
"node": "5.6.0"
}
}
require('babel-polyfill');
// Webpack config for creating the production bundle.
var path = require('path');
var webpack = require('webpack');
var CleanPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var strip = require('strip-loader');
var projectRootPath = path.resolve(__dirname, '../');
var assetsPath = path.resolve(projectRootPath, './static/dist');
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
module.exports = {
devtool: 'source-map',
context: path.resolve(__dirname, '..'),
entry: {
'main': [
'bootstrap-sass!./src/theme/bootstrap.config.prod.js',
'./src/client.js'
]
},
output: {
path: assetsPath,
filename: '[name]-[chunkhash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: '/dist/'
},
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: [strip.loader('debug'), 'babel']},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true') },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
{ test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
]
},
progress: true,
resolve: {
modulesDirectories: [
'src',
'node_modules'
],
extensions: ['', '.json', '.js', '.jsx']
},
plugins: [
new CleanPlugin([assetsPath], { root: projectRootPath }),
// css files from the extract-text-plugin loader
new ExtractTextPlugin('[name]-[chunkhash].css', {allChunks: true}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
},
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: false,
__DEVTOOLS__: false
}),
// ignore dev config
new webpack.IgnorePlugin(/\.\/dev/, /\/config$/),
// optimizations
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
webpackIsomorphicToolsPlugin
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment