我正在学习Vue.js和Webpack,对于如何正确导入和引用我的字体、CSS和node_modules
有些疑惑。
我使用vue-cli
开始了我的应用程序,这是结果结构:
build
config
node_modules
src
--assets
--components
--router
static
这是我的webpack.base.conf
文件:
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]')
}
}
]
}
}
首先,把自定义的CSS和图片放在哪里才是正确的?我目前将它们分别放在
assets/css
和assets/img
文件夹中(我创建了这些文件夹)。这样做正确吗?我还有一些来自外部库(例如Bootstrap和Font Awesome)的CSS和字体,我通过NPM安装它们。它们位于
node_modules
文件夹内。如果我没错的话,Webpack会将这些文件转换并复制到另一个位置。我该如何在Vue文件和CSS文件中引用它们?
使用
import './assets/css/style.css'import '../node_modules/path/to/bootstrap.min.css'
可以工作(至少在生产环境中),但是我应该使用其他路径吗?在我的自定义CSS文件中,我使用以下方式引用外部库的一些字体:
src: url('/node_modules/roboto-fontface/fonts/Roboto/Roboto-LightItalic.eot')
代码编译成功,但在浏览器打开页面时,搜索这些字体时出现了404错误。我该如何在自定义CSS中引用这些字体?