Sass-загрузчик Webpack с бутстрапом

Я только что погрузился в веб-пакет, но теперь у меня случился приступ, когда я пытаюсь включить bootstrap-sass из файла index.scss.

Эта конфигурация веб-пакета отлично работает и выводит файл .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 я должен включить bootstrap-sass. index.scss, который согласно https://www.npmjs.com/package/sass-loader#imports вы добавляете ~ и веб-пакет должен решить все это:

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

Есть ли что-то незначительное, что мне не хватает, что любой может заметить :)?


person John    schedule 05.11.2016    source источник


Ответы (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, но не знает, что с ним делать, потому что вы не использовали подходящий загрузчик.

Во-первых, установите 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'
},

Таким образом, вы сможете загрузить большинство типов шрифтов.

person Dimitris Karagiannis    schedule 05.11.2016
comment
Ах ха! спасибо! Ваш ответ в сочетании с stackoverflow.com/ questions/34639720/ помогли мне разобраться в этом. Все еще не уверен на 100%, что получил этот веб-пакет;) - person John; 06.11.2016
comment
Кроме того, все, кто читает это... не забудьте добавить загрузчик URL и загрузчик файлов в свой пакет json. - person John; 06.11.2016
comment
@John Джон Ой, ты прав, я предполагал, что они у тебя есть. Добавлю в ответ, чтобы быть полным - person Dimitris Karagiannis; 06.11.2016
comment
Спасибо, Джон, это работа и для меня. Ответ Димитриса Карагианниса прошел Неожиданный символ '�' (1:0), но я получил другую ошибку: *.ttf Неожиданный символ '' (1:0) - person Huy Nguyen; 19.01.2017
comment
@HuyNguyen Можете ли вы вставить строки ошибок из ERROR in... в ...(1:0)? - person Dimitris Karagiannis; 20.01.2017
comment
@Dimitris Karagiannis: Полное сообщение об ошибке: ОШИБКА в ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf Ошибка синтаксического анализа модуля: /react/node_modules/bootstrap-sass/assets/fonts/bootstrap /glyphicons-halflings-regular.ttf Неожиданный символ '' (1:0) Для обработки файлов этого типа может потребоваться соответствующий загрузчик. - person Huy Nguyen; 23.01.2017