ブートストラップ sass と抽出テキスト プラグインを使用して、コンパイルされた css をファイルに出力しています。style.scss 内にブートストラップをインポートしない場合は完全に機能しますが、ブートストラップ webpack をインポートするとフォント パスを解決できません。/node_modules/bootstrap-sass/ ではなく、src フォルダーでブートストラップ フォントを探します。
モジュールが見つかりません: エラー: 'ファイル' または 'ディレクトリ' を解決できません ../fonts/bootstrap/glyphicons-halflings-regular.svg in /Users/yasinyaqoobi/Sites/dari-dictionary-api/src/assets/sass
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
パッケージ.json
{
"name": "dari-dictionary-api",
"version": "1.0.0",
"description": "Dari Dictionary API built with express.js for the Android App.",
"main": "dist",
"scripts": {
"dev": "nodemon --ignore src/assets -w src --exec \"babel-node src --presets es2015,stage-0\"",
"build": "babel src -s -D -d dist --presets es2015,stage-0",
"start": "node dist",
"prestart": "npm run -s build",
"test": "eslint src",
"watch": "webpack --display-error-details --config webpack.config.js --watch"
},
"repository": {
"type": "git",
"url": ""
},
"author": "Yasin Yaqoobi",
"license": "MIT",
"dependencies": {
"body-parser": "^1.13.3",
"bootstrap-sass": "^3.3.7",
"compression": "^1.5.2",
"cors": "^2.7.1",
"express": "^4.13.3",
"nunjucks": "^3.0.0",
"path": "^0.12.7"
},
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-core": "^6.20.0",
"babel-loader": "^6.2.9",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.20.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.20.0",
"css-loader": "^0.26.1",
"eslint": "^3.1.1",
"express-winston": "^2.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"node-sass": "^4.0.0",
"nodemon": "^1.9.2",
"sass-loader": "^4.0.2",
"sqlite3": "^3.1.8",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.14.0",
"winston": "^2.3.0"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('public/css/style.css');
module.exports = {
entry: path.resolve(__dirname, 'src/assets/js'),
output: {
filename: 'public/js/index.js',
},
devtool: "source-map",
module: {
loaders: [{
loader: "babel-loader",
// Skip any files outside of your project's `src` directory
exclude: /node_modules/,
// Only run `.js` and `.jsx` files through Babel
test: /\.jsx?$/,
// Options to configure babel with
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0'],
}
},
{ test: /\.scss$/i, loader: extractCSS.extract(['css', 'sass']) },
{ test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/
, loader: 'url?limit=100000&name=[name].[ext]'
}
]
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ // Make jquery available globally
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
],
debug: true,
}