带引导程序的Webpack sass-loader

Question

我刚刚进入webpack，但现在已经抛出了一个合适的，当我尝试从index.scss文件中包含bootstrap-sass时。

此的WebPack的conf的伟大工程，.css文件输出到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 to preprocess CSS 
       ) 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('css/[name].css') 
    ], 
    resolve: { 
     modulesDirectories: [ 
      './node_modules' 
     ] 
    } 
}; 

的问题是，在index.scss我必须包括自举顶嘴。 index.scss，其中根据https://www.npmjs.com/package/sass-loader#imports添加了〜然后的WebPack应该可以解决这一切：

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

问题是我的尝试是不是：/。我得到的输出：

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) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '�' (1:0) 
    at Parser.pp$4.raise (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2221:15) 
    at Parser.pp$7.getTokenFromCode (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2756:10) 
    at Parser.pp$7.readToken (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2477:17) 
    at Parser.pp$7.nextToken (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:2468:15) 
    at Parser.parse (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:515:10) 
    at Object.parse (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/acorn/dist/acorn.js:3098:39) 
    at Parser.parse (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack/lib/Parser.js:902:15) 
    at DependenciesBlock.<anonymous> (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack/lib/NormalModule.js:104:16) 
    at DependenciesBlock.onModuleBuild (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10) 
    at nextLoader (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25) 
    at /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5 
    at Storage.finished (/mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16) 
    at /mnt/4E6E45D36E45B48D/Work/webpack-demo/node_modules/graceful-fs/graceful-fs.js:78:16 
    at 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是相当强大的，但它确实需要你圆房子得走了...... 这是我的package.json文件

{ 
    "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" 
    } 
} 

有什么次要的我我错过了任何人都可以发现:)？

Answer 1

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) 
You may need an appropriate loader to handle this file type. 

这是你的问题。

该编译器试图加载一个.eot字体文件，但它不知道该如何处理它，因为您没有使用合适的加载器。

首先，installl的file-loader，并在你的开发依赖关系url-loader，像这样：npm install file-loader url-loader -D

然后，在你装载机

{ 
    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' 
}, 

这样你就可以加载大多数类型的添加这些字体