vueJS + webpack：导入字体，CSS和node_modules

问题描述：

我以Vue.js和Webpack开始，我对如何正确导入和引用我的字体，CSS和node_modules有一些疑问。vueJS + 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（我创建了这些文件夹）。这是对的吗？

我也有一些CSS和字体来自外部库（Bootstrap和Font Awesome，例如），我已经通过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中引用这些字体？

答

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

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

使用进口“./assets/css/style.css'import” ../node_modules/path/to/bootstrap.min.css的作品（至少在生产中），但我应该用另一种路径？

Webpack将css嵌入到它的JS文件中，所以如果你不导入它，Webpack将不知道它。这里是动态

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

加载图像一个例子，如果你刚刚到手的SRC结合的图形文件也将无法加载，所以我们手上的图像文件名到是这样的

的方法

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

现在的方法中，我们从资产文件夹（使用在决心下的webpack.base.conf文件中配置的@符号加载图像。别名）

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

SRC：

在我的自定义的CSS文件，我使用参考某些字体从外部库URL（ '/ node_modules /的Roboto-fontface /字体/的Roboto /的Roboto-LightItalic.eot'）代码编译，但是当我在浏览器中打开页面时，搜索这些字体时收到404错误。我应该如何在我的自定义CSS上引用这些字体？

最好您将您想要的所有内容都复制到您的src文件夹的dist文件夹中。我不太确定，从来没有尝试过，但看着webpack.prod.conf文件，它看起来只会从src/assets文件夹复制文件。关于字体没有加载，这有点不同，因为url-loader会处理这些文件，所以你必须从浏览器的角度去思考它，并像url路径一样引用它。这里是一个东西，我在我的组件之一

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

见我没怎么用@符号来从src文件夹引用它？不需要网址。

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

vueJS + webpack：导入字体，CSS和node_modules

相关推荐