vueJS + webpack: importing fonts, CSS, and node_modules

Question

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 node_modules correctly.

I started my application using vue-cli, and here's the resultant structure:

build
config
node_modules
src
--assets
--components
--router
static

And here's my webpack.base.conf file:

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]')
        }
      }
    ]
  }
}

First of all, where is the correct place to put my custom CSS and images? I'm currently putting them inside assets/css and assets/img, respectively (I created these folders). Is it correct?

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 node_modules.

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?

Using import './assets/css/style.css'import '../node_modules/path/to/bootstrap.min.css' works (at least in production), but should I be using another path?

Inside my custom CSS files, I reference some fonts from an external library using:

src: url('/node_modules/roboto-fontface/fonts/Roboto/Roboto-LightItalic.eot')

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?

Answer 1

First of all, where is the correct place to put my custom css and images? I'm currently putting them inside assets/css and assets/img, respectively (I created these folders). Is it correct?

This is kind of a subjective question, but the short answer is yes. The cli tool already created this for you, defined some stuff in the Webpack config files, so why not use it?

Using import './assets/css/style.css'import '../node_modules/path/to/bootstrap.min.css' works (at least in production), but should I be using another path?

Webpack embeds the css into the it's JS file, so if you don't import it Webpack will not know about it. Here is an example with loading images dynamically

    <ul id="albums">
    <li v-for="album in albums">
        <img :src="LoadImage(album.data.imagefile)" />
    </li>
</ul>

if you'll just hand the src binding the artwork file it will fail to load it, so we hand the image file name to a method that goes like this

LoadImage(filename) {
        const image = require('@/assets/img/' + filename)
        return image
    }

now inside the method we load the image from the assets folder ( using the @ notation that was configured in the webpack.base.conf file under resolve.alias )

So yes, using the import/require functions are the way to go for Webpack to get to know your files.

Inside my custom css files, I reference some fonts from an external library using:

src: url('/node_modules/roboto-fontface/fonts/Roboto/Roboto-LightItalic.eot') The code compiles, but when I open the page in the browser, I recieve a 404 Error when searching for these fonts. How should I be referencing these fonts on my custom css?

It's best that you'll copy everything you want in your dist folder in your src folder. I'm not really sure, never tried it, but looking at the webpack.prod.conf file it looks like it will only copy files from the src/assets folder. Regarding the font not loading, this is a bit different since the url-loader will handle the files, so you have to think of it from the browser point of view, and reference it like a url path. here is an something i have in one of my components

@font-face {
  font-family: BebasNeue;
  src: url('./assets/fonts/BebasNeue.otf');
}

See how i didn't used the @ notation to reference it from the src folder? no need for urls.

I'm guessing you already answered this question and if not, Hope that helps! You can ask questions here http://chat.vuejs.org/ and get answers from the community and the core team.

Answer 2

Quck solution what i did comment @font-face {} section and build and added custom css to style file