bline / bootstrap-webpack

development has moved to https://github.com/gowravshekar/bootstrap-webpack
MIT License
90 stars 54 forks source link

Not allowed to load local resource #15

Open newtonianb opened 9 years ago

newtonianb commented 9 years ago

I followed the instructions exactly from the readme and my entry.js is like so

entry.js

require('bootstrap-webpack!./bootstrap.config.js');

bootstrap.config.js

'use strict';
// ## bootstrap-webpack Configuration

module.exports = {
  // ### Scripts
  // Any scripts here set to false will never
  // make it to the client, it's not packaged
  // by webpack.
  scripts: {
    'transition': true,
    'alert': true,
    'button': true,
    'carousel': true,
    'collapse': true,
    'dropdown': true,
    'modal': true,
    'tooltip': true,
    'popover': true,
    'scrollspy': true,
    'tab': true,
    'affix': true
  },
  // ### Styles
  // Enable or disable certain less components and thus remove
  // the css for them from the build.
  styles: {
    "mixins": true,

    "normalize": true,
    "print": true,

    "scaffolding": true,
    "type": true,
    "code": true,
    "grid": true,
    "tables": true,
    "forms": true,
    "buttons": true,

    "component-animations": true,
    "glyphicons": true,
    "dropdowns": true,
    "button-groups": true,
    "input-groups": true,
    "navs": true,
    "navbar": true,
    "breadcrumbs": true,
    "pagination": true,
    "pager": true,
    "labels": true,
    "badges": true,
    "jumbotron": true,
    "thumbnails": true,
    "alerts": true,
    "progress-bars": true,
    "media": true,
    "list-group": true,
    "panels": true,
    "wells": true,
    "close": true,

    "modals": true,
    "tooltip": true,
    "popovers": true,
    "carousel": true,

    "utilities": true,
    "responsive-utilities": true
  }
};

webpackconfig.js

...
        // **IMPORTANT** This is needed so that each bootstrap js file required by
        // bootstrap-webpack has access to the jQuery object
        // { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
        { test: require.resolve("jquery"), loader: "imports?jQuery=jquery" },
        // Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack)
        // loads bootstrap's css.
        { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,   loader: "url?limit=10000&mimetype=application/font-woff" },
        { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,  loader: "url?limit=10000&mimetype=application/font-woff2" },
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&mimetype=application/octet-stream" },
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: "file" },
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&mimetype=image/svg+xml" }
...

When I compile my page with webpack I get 3 errors for 3 fonts.

2015-07-11 22:49:28.075 (index):1 Not allowed to load local resource: file:///D:/scratchtestssetsscripts448c34a56d699c29117adc64c43affeb.woff2
2015-07-11 22:49:28.076 (index):1 Not allowed to load local resource: file:///D:/scratchtestssetsscriptsfa2772327f55d8198301fdb8bcfc8158.woff
2015-07-11 22:49:28.076 (index):1 Not allowed to load local resource: file:///D:/scratchtestssetsscriptse18bbf611f2a2e43afc071aa2f4e1512.ttf

First I don't know whats up with the missing slashes but it's looking for the files in the wrong place. my script folder: D:/scratch/test/assets/scripts my output folder: D:/scratch/test/public/scripts

I can see the font files at D:/scratch/test/public/scripts