vueJS + webpack：导入字体，CSS和node_modules [英] vueJS + webpack: importing fonts, CSS, and node_modules

问题描述

我从Vue.js和Webpack开始，我对如何正确导入和引用我的字体，CSS和 node_modules 有一些疑问。

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.

我使用 vue-cli 启动了​​我的应用程序，这是结果结构：

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

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

这是我的 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]')
        }
      }
    ]
  }
}

首先，放置自定义CSS和图像的正确位置在哪里？我现在分别将它们放在 assets / css 和 assets / img 中（我创建了这些文件夹）。它是否正确？

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?

我还有一些来自外部库（例如Bootstrap和Font Awesome）的CSS和字体，我已经通过NPM安装了。它们位于 node_modules 。

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.

如果我没错，Webpack转换并将这些文件复制到另一个位置。如何在我的Vue文件和CSS文件中引用它们？

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?

使用 import'./assets/css/style.css'import'。 ./node_modules/path/to/bootstrap.min.css'有效（至少在生产中），但是我应该使用其他路径吗？

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?

在我的自定义CSS文件中，我使用以下方法从外部库引用一些字体：

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

代码编译，但是我在浏览器中打开页面，搜索这些字体时收到404错误。我应该如何在自定义CSS中引用这些字体？

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?

推荐答案

首先，在哪里放置我的自定义CSS和图像的正确位置？我现在分别将它们放在assets / css和assets / img中（我创建了这些文件夹）。这是正确的吗？

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配置文件中定义了一些东西，那么为什么不使用呢？

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?

使用import'./assets/css/style.css'import'../node_modules/path/to/bootstrap.min.css'可以工作（至少在生产中），但我应该使用其他路径吗？

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就不会知道它。
以下是动态加载图片的示例

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>

如果您只是将src绑定到艺术品文件，它将无法加载它，所以我们将图像文件名移到类似这样的方法

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
    }

现在在方法内部我们从assets文件夹加载图像（使用在resolve.alias下的webpack.base.conf文件中配置的@表示法）

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 )

所以是的，使用import / require函数是Webpack了解你的文件的方法。

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

在我的自定义css文件中，我使用以下方法从外部库中引用一些字体：

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'）
代码编译，但是当我在浏览器中打开页面时，我在搜索这些字体时收到404错误。我应该如何在我的自定义CSS上引用这些字体？

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将处理文件，因此您必须从浏览器的角度来考虑它，并将其引用为url路径。
这里是我的一个组件中的东西

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

看看我是如何使用@ notation从src引用它的夹？不需要网址。

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

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

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.

这篇关于vueJS + webpack：导入字体，CSS和node_modules的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！