부트 스트랩이있는 Webpack sass-loader

Question

웹팩에 방금 들었지만 index.scss 파일의 부트 스트랩을 포함 시키려고 할 때 적합합니다.

이 웹팩 conf의 위대한 작품과 내가 부트 스트랩-말대꾸를 포함해야하는 index.scss에, 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' 
     ] 
    } 
}; 

문제가에 .css 파일을 출력합니다. https://www.npmjs.com/package/sass-loader#imports에 따라 당신은 ~를 추가하고 웹팩 다음 모든 것을 해결해야 index.scss :

$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 

웹팩은 매우 강력하지만 이것은 내 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. 

문제가 있습니다.

compliler가 .eot 글꼴 파일을로드하려고 시도하지만 적절한 로더를 사용하지 않아서 수행 할 작업을 알지 못합니다.

첫째, installl 그래서 같은 file-loader 및 dev에 종속성에서 url-loader : 그런 다음, 로더

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

당신의 대부분의 유형을로드 할 수 있습니다이 방법이 추가 npm install file-loader url-loader -D

글꼴