VueJS + webpack: import fonts, CSS and node_modules

Question

I start with Vue.js and Webpack, and I have some doubts about the correct import and reference to my fonts, CSS and node_modules correctly.

I started my application using vue-cli , and here is the resulting structure:

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

And here is 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 to place my own CSS and images correctly? I now put 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 (e.g. Bootstrap and Font Awesome) that I installed through NPM. They are located in node_modules .

If I am not mistaken, Webpack will convert and copy these files to another location. How can I link to their Vue files and CSS files?

Using import './assets/css/style.css'import '../node_modules/path/to/bootstrap.min.css' works (at least during production), but should I use a different way?

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 a browser, I get a 404 error when looking for these fonts. How should I refer to these fonts in my custom CSS?

Answer 1

First of all, where is the right place to put my custom CSS and images? Currently, I put them in assets / css and assets / img respectively (I created these folders). It is right?

This is a kind of subjective question, but the short answer is yes. The cli tool has already created this for you, defined some things in the Webpack configuration 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 use a different way?

Webpack embeds css in the JS it file, so if you do not import it, Webpack will not know about it. Here is an example with dynamic image loading

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

if you just pass src that binds the illustration file, it cannot load it, so we will pass the name of the image file to a method that looks like this

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

now inside the method we load the image from the resource folder (using the @ notation, which was configured in the webpack.base.conf file in the resol.alias file)

So yes, using import / require functions is the way Webpack recognizes 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 get a 404 error when searching for these fonts. How should I refer to these fonts in my custom CSS?

It is best to copy everything you want into the dist folder in the src folder. I'm not quite sure I have never tried, but looking at the webpack.prod.conf file, it looks like it will only copy files from the src / assets folder. As for a font that doesn't load, this is a little different since the url loader will process the files, so you should think about it from a browser perspective and refer to it as a URL path. here is something i have in one of my components

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

See how I did not use @ notation to refer to it from the src folder? no url needed.

I think you have already answered this question, and if not, I hope this helps! You can ask questions here http://chat.vuejs.org/ and get answers from the community and the core team.

Answer 2

Quck the decision that I made, commented on the @font-face {} section and compiled and added my own CSS to the style file