title: vueJS + webpack: importing fonts, CSS, and node_modules
body: <p>I'm starting with Vue.js and Webpack and I'm having some doubts about how to correctly import and reference my fonts, CSS, and <code>node_modules</code> correctly.</p>
  
  <p>I started my application using <code>vue-cli</code>, and here's the resultant structure:</p>
  
  <pre><code>build
  config
  node_modules
  src
  --assets
  --components
  --router
  static
  </code></pre>
  
  <p>And here's my <code>webpack.base.conf</code> file:</p>
  
  <pre><code>var path = require('path')
  var utils = require('./utils')
  var config = require('../config')
  var vueLoaderConfig = require('./vue-loader.conf')
  
  function resolve (dir) {
    return path.join(__dirname, '..', dir)
  }
  
  module.exports = {
    entry: {
      app: './src/main.js'
    },
    output: {
      path: config.build.assetsRoot,
      filename: '[name].js',
      publicPath: process.env.NODE_ENV === 'production'
        ? config.build.assetsPublicPath
        : config.dev.assetsPublicPath
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src')
      }
    },
    module: {
      rules: [
        {
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          enforce: 'pre',
          include: [resolve('src'), resolve('test')],
          options: {
            formatter: require('eslint-friendly-formatter')
          }
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: vueLoaderConfig
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [resolve('src'), resolve('test')]
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
          }
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
          }
        }
      ]
    }
  }
  </code></pre>
  
  <p>First of all, where is the correct place to put my custom CSS and images? I'm currently putting them inside <code>assets/css</code> and <code>assets/img</code>, respectively (I created these folders). Is it correct?</p>
  
  <p>I also have some CSS and fonts from external libraries (Bootstrap and Font Awesome, for example) that I have installed via NPM. They're located at <code>node_modules</code>.</p>
  
  <p>If I'm not wrong, Webpack transforms, and copies these files to another location. How can I reference them on my Vue files and CSS files?</p>
  
  <p>Using <code>import './assets/css/style.css'import '../node_modules/path/to/bootstrap.min.css'</code> works (at least in production), but should I be using another path?</p>
  
  <p>Inside my custom CSS files, I reference some fonts from an external library using:</p>
  
  <pre><code>src: url('/node_modules/roboto-fontface/fonts/Roboto/Roboto-LightItalic.eot')
  </code></pre>
  
  <p>The code compiles, but when I open the page in the browser, I receive a 404 error when searching for these fonts. How should I be referencing these fonts in my custom CSS?</p>