1

我正在使用 bootstrap sass 并提取 text-plugin 以将编译后的 css 输出到文件中。如果我不在我的 style.scss 中导入引导程序，它会完美工作，但是当我导入引导程序时，webpack 无法解析字体路径。它在我的 src 文件夹而不是 /node_modules/bootstrap-sass/ 中查找引导字体

找不到模块：错误：无法解析 /Users/yasinyaqoobi/Sites/dari-dictionary-api/src/assets/sass 中的“文件”或“目录”../fonts/bootstrap/glyphicons-halflings-regular.svg

@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,
}
4

0 回答 0