15

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>
Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291
  • Where is your Font.scss file (shown in your description) located in your folder structure? Is it fontello.scss or is there another file? Couldn't find an error in your config so far but I'm quite sure it's a path reated issue like Lindebergue described. – Wolfgang Aug 02 '16 at 20:04

3 Answers3

1

Since Sass doesn't provide url rewriting, using url() is a bit tricky. A simple fix is to use relative paths to the entry file.

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?42978343');
  src: url('../font/fontello.eot?42978343#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?42978343') format('woff2'),
       url('../font/fontello.woff?42978343') format('woff'),
       url('../font/fontello.ttf?42978343') format('truetype'),
       url('../font/fontello.svg?42978343#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
Lindebergue
  • 11
  • 2
  • Thanks for the feedback :D However I get: `ERROR in ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/client/scss/main.scss Module not found: Error: Cannot resolve 'file' or 'directory' ../font/fontello.eot in C:\var\www\wekindred.com\src\client\scss @ ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/client/scss/main.scss 6:887-927 ` Do I have to change something in my webpack.config? – Jamie Hutber Jul 22 '16 at 09:35
  • 3
    make sure to get the right relative path: supposing your font SCSS files are imported in main.css, you'll need the path from main.css to the font file. So it should look like: '../../../public/font/fontello.eot?42978343' .. if I counted the directories correctly ;-) – Wolfgang Aug 02 '16 at 20:46
0

That's because Sass doesn't have "resolve url" option (But stylus and less(default option) do have it). The only solution I know is to use another loader that will resolve all urls https://github.com/bholloway/resolve-url-loader. Something like: 

{
   test   : /\.scss$/,
   loaders: "!css!resolve-url!sass?sourceMap"
}
Alex Pavlov
  • 150
  • 6
0

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.

Jamie Hutber
  • 26,790
  • 46
  • 179
  • 291