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中引用這些字體？

來源

2017-04-11 felipeecst

首先，哪裏是我的自定義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/，並從社區和核心團隊處獲得答案。

來源

2017-07-13 20:42:31 doubleorseven

vueJS + webpack：導入字體，CSS和node_modules

回答

相關問題