我开始使用 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 中(我创建了这些文件夹)。是否正确？

我还通过 NPM 安装了一些来自外部库(例如 Bootstrap 和 Font Awesome)的 CSS 和字体。它们位于 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 中引用这些字体？

最佳答案

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?

这是一个主观问题，但简短的回答是肯定的。 cli 工具已经为你创建了这个，在 Webpack 配置文件中定义了一些东西，那么为什么不使用它呢？

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 将 css 嵌入到它的 JS 文件中，所以如果你不导入它，Webpack 将不知道它。 这是一个动态加载图像的例子

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

如果你只是将 src 绑定(bind)到艺术品文件，它将无法加载它，所以我们将图像文件名交给这样的方法

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

现在在方法中我们从 assets 文件夹加载图像(使用在 webpack.base.conf 文件中 resolve.alias 下配置的 @ 符号)

是的，使用 import/require 函数是 Webpack 了解文件的方式。

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?

最好将 dist 文件夹中的所有内容复制到 src 文件夹中。我不太确定，从未尝试过，但查看 webpack.prod.conf 文件，它看起来只会从 src/assets 文件夹中复制文件。 关于未加载字体，这有点不同，因为 url-loader 将处理文件，因此您必须从浏览器的 Angular 考虑它，并将其像 url 路径一样引用。 这是我的一个组件中的东西

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

看到我没有使用 @ 符号从 src 文件夹中引用它了吗？无需网址。

我猜您已经回答了这个问题，如果没有，希望对您有所帮助! 有问题可以在这里提问http://chat.vuejs.org/并从社区和核心团队那里得到答案。

关于javascript - vueJS + webpack : importing fonts, CSS 和 node_modules，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43348768/