Loading in local fonts with webpack 2 and the vue-cli -
i'm using vue-cli webpack template , i'm trying load in local fonts in project. i'm having trouble getting path fonts correct. how should path like?
i found information might doing wrong couldn't figure out: https://github.com/webpack-contrib/sass-loader#problems-with-url
file structure:
in _fonts.scss:
// webfont: latolatin-regular @font-face { font-family: 'latolatinweb'; src: url('../assets/fonts/latolatin-regular.eot'); /* ie9 compat modes */ src: url('../assets/fonts/latolatin-regular.eot?#iefix') format('embedded-opentype'), /* ie6-ie8 */ url('../assets/fonts/latolatin-regular.woff2') format('woff2'), /* modern browsers */ url('../assets/fonts/latolatin-regular.woff') format('woff'), /* modern browsers */ url('../assets/fonts/latolatin-regular.ttf') format('truetype'); font-style: normal; font-weight: normal; text-rendering: optimizelegibility; }
webpack.base.config.sj:
{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetspath('fonts/[name].[hash:7].[ext]') } }
utils.js:
return { css: generateloaders(), postcss: generateloaders(), less: generateloaders('less'), sass: generateloaders('sass', { indentedsyntax: true }), scss: generateloaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/styles/_variables.scss') } } ).concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/styles/mixins/_mixins.scss') } } ).concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/styles/_fonts.scss') } } ), stylus: generateloaders('stylus'), styl: generateloaders('stylus') }
how load local fonts in vue-cli webpack template?
Comments
Post a Comment