Jamie Hutber Jamie Hutber - 3 months ago 165
CSS Question

Webpack - Style sheet loading but no fonts

I am able to see my stylesheet in the page without problems. However I cannot get my webfonts to work. I have tried to save the output of my css which doesn't happen. I believe this is why the fonts aren't working.

Webpack

var webpack = require ('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

resolve: {
extensions: ['', '.js']
},

entry: ['webpack-hot-middleware/client','./src/client/js/Kindred.js'],

output: {
path: './public',
filename: 'bundle.js',
publicPath: '/public/js'
},

devtool: 'cheap-module-source-map',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {presets: ['es2015', 'react', 'react-hmre', 'stage-0']}
},
{test: /\.scss$/, loaders: [
'style?sourceMap&modules',
'css?sourceMap&modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'resolve-url',
'sass?sourceMap&modules']},
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader?modules!css-loader?sourceMap&modules" )},
{test: /\.png$/, loader: "url-loader?limit=100000"},
{test: /\.jpg$/, loader: "file-loader"},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=public/font/[name].[ext]'
}
]
},

sassLoader: {
includePaths: [ 'src/client/scss' ]
},

plugins: process.env.NODE_ENV === 'production' ? [
new ExtractTextPlugin ('app.css', {allChunks: true}),
new webpack.optimize.DedupePlugin (),
new webpack.optimize.OccurrenceOrderPlugin (),
new webpack.optimize.UglifyJsPlugin ()
] : [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin("[name].css")
]

};


Font.scss

@font-face {
font-family: 'fontello';
src: url('/public/font/fontello.eot?42978343');
src: url('/public/font/fontello.eot?42978343#iefix') format('embedded-opentype'),
url('/public/font/fontello.woff2?42978343') format('woff2'),
url('/public/font/fontello.woff?42978343') format('woff'),
url('/public/font/fontello.ttf?42978343') format('truetype'),
url('/public/font/fontello.svg?42978343#fontello') format('svg');
font-weight: normal;
font-style: normal;
}


Build Out

Hash: 6dbe5412ed2de3ad1f84
Version: webpack 1.13.1
Time: 5989ms
Asset Size Chunks Chunk Names
bundle.js 2.2 MB 0 [emitted] main
0.4dfc2adf9da9e1d82440.hot-update.js 402 kB 0 [emitted] main
4dfc2adf9da9e1d82440.hot-update.json 36 bytes [emitted]
bundle.js.map 2.51 MB 0 [emitted] main
0.4dfc2adf9da9e1d82440.hot-update.js.map 419 kB 0 [emitted] main
chunk {0} bundle.js, 0.4dfc2adf9da9e1d82440.hot-update.js, bundle.js.map, 0.4dfc2adf9da9e1d82440.hot-update.js.map (main) 2.08 MB [rendered]
[565] ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/resolve-url-loader!./~/sass-loader?sourceMap&modules!./src/client/scss/main.scss 401 kB {0} [built]
+ 565 hidden modules
webpack: bundle is now VALID.


Folder Structure

enter image description here

HTML

<!doctype html public="storage">
<html>
<link rel='stylesheet' href='/public/styles.css' type='text/css' />
<title>MyKindred.com</title>
<div id=app></div>
<script src="/public/js/bundle.js"></script>

Answer

Ok just so its easy for people to see what I did to get it working here it is:

I think it was easier for me to completely remove scss and just go with css modules out of the box. This seemed to help a lot.

I used git@github.com:christianalfoni/webpack-express-boilerplate.git to help me guide myself through. Knowing I had a working thing actually taught me a hell of a lot more than I have most likely learnt before hand in webpack. As you can guess that wasn't very much :D

Also the one main change that really helped was changing the paths not surprisingly. But these were relative to the path sex in output.path I had read this before but thought that was relative to the wepack.config.js not that from there on everything would count as document root, even for the html and css.

**KEY PART :) **

I also have to update my express set up, as I hadn't given it a express.static path... Oh my folly, how could I miss such a basic thing.. So:

Express

app.use(express.static(__dirname + '/public/')); //Don't forget me :(

Final CSS

/* Webfont: Lato-Black */@font-face {
    font-family: 'LatoBlack';
    src: url('/font/Lato-Black.eot'); /* IE9 Compat Modes */
    src: url('/font/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
         url('/font/Lato-Black.woff') format('woff'), /* Modern Browsers */
         url('/font/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

Wekpack.config

'use strict';
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var qs = require('querystring');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var stripInlineComments = require('postcss-strip-inline-comments');

module.exports = {
    devtool: 'eval-source-map',
    // resolve: { modulesDirectories: ['node_modules'], extension: ['', '.js', '.css'] },
    entry: [
        'webpack-hot-middleware/client?reload=true',
        path.join(__dirname, 'src/client/js/Kindred')
        // path.join(__dirname, 'app/main')
    ],
    output: {
        path: path.join(__dirname, '/public/'),
        filename: '[name].js',
        publicPath: '/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.tpl.html',
            inject: 'body',
            filename: 'index.html'
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ],
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {"presets": ["react", "es2015", "stage-0", "react-hmre"]}
            }, {
                test: /\.json?$/,
                loader: 'json'
            },
            {
                test: /\.jpg$/, loader: "file-loader"
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader?importLoaders&' + qs.stringify({
                        modules: true,
                        importLoaders: 1,
                        localIdentName: '[path][name]-[local]'
                    }),
                    'postcss-loader?parser=postcss-scss'
                ]
            },
            // Font Definitions
            { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=font/[name].[ext]' },
            { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=font/[name].[ext]' },
            { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=font/[name].[ext]' },
            { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=font/[name].[ext]' },
            { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=font/[name].[ext]' }
        ]
    },
    postcss: function (webpack) {
        return [
            stripInlineComments
            , precss
            , autoprefixer
            , require('postcss-simple-vars')
            , require('postcss-nested'
            , autoprefixer({browsers: ['last 2 versions']}))
        ];
    }
};

I want to say sorry for everybody that tried. I feel that I was far off in the end. I am only posting this incase anybody is having similar problems. What I would take from this is just to either use that boiler plate. Or the static part and parths inside of the html because of that.