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
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> 2 Answers
Answers 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; } Answers 2
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" } 
0 comments:
Post a Comment