I've recently started working with Vue.js and Webpack, and I'm facing some challenges regarding the correct way to import and reference fonts, CSS, and node_modules in my project.
My project structure looks like this, as set up by vue-cli:
build
config
node_modules
src
--assets
--components
--router
static
Here's a snippet from 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)
}
// More webpack configuration code goes here...
The main question I have is about the correct location to store custom CSS files and images. Currently, I'm placing them inside assets/css and assets/img directories respectively that I created. Is this the right approach?
In addition to custom styles, I also need to include CSS and fonts from external libraries such as Bootstrap and Font Awesome which are installed via npm and located in node_modules.
Webpack seems to handle these external resources, but I'm unsure of the correct way to reference them in my Vue components and CSS files. While using import statements works to some extent, I am not certain if there is a better practice for specifying the paths.
For example, within my custom CSS, I try to refer to fonts from an external library like this:
src: url('/node_modules/roboto-fontface/fonts/Roboto/Roboto-LightItalic.eot')Although the code compiles, it results in a 404 error when loading the web page due to incorrect font references. How should these fonts be correctly referenced in the custom CSS?