Webpack sass-loader with bootstrap -

i have got head webpack has thrown fit when try include bootstrap-sass index.scss file.

this webpack conf works great , outputs .css file css/stylehseet.css

'use strict';  var path = require('path'); var extracttextplugin = require('extract-text-webpack-plugin');  module.exports = {     entry: {         stylesheet: path.resolve(__dirname, 'scss/index.scss')     },     output: {         path: path.resolve(__dirname),         filename: 'bundle.bootstrap-sass.js'     },     module: {         loaders: [             {                 test: /\.scss$/,                 loader: extracttextplugin.extract(                     'style', // backup loader when not building .css file                     'css!sass' // loaders preprocess css                 )             }         ]     },     plugins: [         new extracttextplugin('css/[name].css')     ],     resolve: {         modulesdirectories: [             './node_modules'         ]     } }; 

the problem is, in index.scss have include bootstrap-sass. index.scss, according https://www.npmjs.com/package/sass-loader#imports add ~ , webpack should resolve all:

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; @import "~bootstrap-sass/assets/stylesheets/bootstrap"; 

problem in attempts isn't :/. output:

hash: b59b46e5946e7ab3d888 version: webpack 1.13.3 time: 1852ms                    asset    size  chunks             chunk names bundle.bootstrap-sass.js  171 kb       0  [emitted]  css     + 9 hidden modules  error in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot module parse failed: /mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot unexpected character '�' (1:0) may need appropriate loader handle file type. syntaxerror: unexpected character '�' (1:0)     @ parser.pp$4.raise (/mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/acorn/dist/acorn.js:2221:15)     @ parser.pp$7.gettokenfromcode (/mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/acorn/dist/acorn.js:2756:10)     @ parser.pp$7.readtoken (/mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/acorn/dist/acorn.js:2477:17)     @ parser.pp$7.nexttoken (/mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/acorn/dist/acorn.js:2468:15)     @ parser.parse (/mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/acorn/dist/acorn.js:515:10)     @ object.parse (/mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/acorn/dist/acorn.js:3098:39)     @ parser.parse (/mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/webpack/lib/parser.js:902:15)     @ dependenciesblock.<anonymous> (/mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/webpack/lib/normalmodule.js:104:16)     @ dependenciesblock.onmodulebuild (/mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/webpack-core/lib/normalmodulemixin.js:310:10)     @ nextloader (/mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/webpack-core/lib/normalmodulemixin.js:275:25)     @ /mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/webpack-core/lib/normalmodulemixin.js:259:5     @ storage.finished (/mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/enhanced-resolve/lib/cachedinputfilesystem.js:38:16)     @ /mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/graceful-fs/graceful-fs.js:78:16     @ fsreqwrap.readfileafterclose [as oncomplete] (fs.js:445:3)  @ ./~/css-loader!./~/sass-loader!./scss/index.scss 6:4172-4253 6:4276-4357  error in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2 ..... etc etc 

webpack powerful take round houses going... package.json file

{   "name": "webpack-demo",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo \"error: no test specified\" && exit 1"   },   "author": "john carmichael",   "license": "isc",   "dependencies": {     "bootstrap-sass": "^3.3.6"   },   "devdependencies": {     "css-loader": "^0.25.0",     "extract-text-webpack-plugin": "latest",     "node-sass": "^3.11.2",     "sass-loader": "^4.0.2",     "style-loader": "^0.13.1",     "webpack": "^1.13.3"   } } 

is there minor missing can spot :) ?

error in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot module parse failed: /mnt/4e6e45d36e45b48d/work/webpack-demo/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot unexpected character '�' (1:0) may need appropriate loader handle file type. 

there's problem.

the compliler trying load .eot font file, doesn't know it, because have not used appropriate loader.

first, installl file-loader , url-loader in dev dependencies, so: npm install file-loader url-loader -d

then, add these in loaders

{     test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,     loader: 'url-loader?limit=10000&mimetype=application/font-woff' }, {     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,     loader: 'url-loader?limit=10000&mimetype=application/octet-stream' }, {     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,     loader: 'file-loader' }, 

this way able load types of fonts