关键词：
【中文标题】使用 webpack 2 和 vue-cli 加载本地字体【英文标题】：Loading in local fonts with webpack 2 and the vue-cli 【发布时间】：2018-01-27 09:09:47 【问题描述】：我正在使用 vue-cli webpack 模板，并尝试在我的项目中加载本地字体。我无法正确获取字体的路径。我的路径应该是什么样子？
我发现了一些关于我可能做错了什么的信息，但我无法弄清楚：https://github.com/webpack-contrib/sass-loader#problems-with-url
文件结构：
在我的 _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')
如何使用 vue-cli webpack 模板加载我的本地字体？
【问题讨论】：
【参考方案1】：我以这种方式导入我的字体：
$font_path: '~@/assets/fonts/';
// *********** //
// SOURCE SANS //
// ITALIC
@font-face
font-family : 'Source Sans Pro';
src : url($font_path +'SourceSansPro-Italic.eot'); /* IE9 Compat; Modes */
src : url($font_path +'SourceSansPro-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url($font_path +'SourceSansPro-Italic.woff2') format('woff2'), /* Modern Browsers */ url($font_path +'SourceSansPro-Italic.woff') format('woff'); /* Modern Browsers */
font-style : italic, oblique;
font-weight : 400;
text-rendering : optimizeLegibility;
// REGULAR
@font-face
font-family : 'Source Sans Pro';
src : url($font_path +'SourceSansPro-Regular.eot'); /* IE9 Compat; Modes */
src : url($font_path +'SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url($font_path +'SourceSansPro-Regular.woff2') format('woff2'), /* Modern Browsers */ url($font_path +'SourceSansPro-Regular.woff') format('woff'); /* Modern Browsers */
font-style : normal;
font-weight : 400;
text-rendering : optimizeLegibility;
// SEMI BOLD
@font-face
font-family : 'Source Sans Pro';
src : url($font_path +'SourceSansPro-Semibold.eot'); /* IE9 Compat; Modes */
src : url($font_path +'SourceSansPro-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url($font_path +'SourceSansPro-Semibold.woff2') format('woff2'), /* Modern Browsers */ url($font_path +'SourceSansPro-Semibold.woff') format('woff'); /* Modern Browsers */
font-style : normal;
font-weight : 600;
text-rendering : optimizeLegibility;
// Use "font-family: $source_sans_pro" in your code.
$source_sans_pro : 'Source Sans Pro', sans-serif;
// [END] SOURCE SANS //
// ***************** //
我所有的字体都位于src/assets/fonts/
我的webpack.base.conf 文件包含这个加载器：
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options:
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
,
【讨论】：
在卡住并忘记相对路径不起作用后为我工作。谢谢！ 太棒了。没有 svg 字体将有助于包含 svg 图像:)【参考方案2】：在我正在做的 vuejs 项目中，
这个没用：
@font-face
font-family: 'name-of-choice';
src: url("~@/assets/<location-to-your-font-file>/font-file-name.ttf") format('font-type');
这行得通：
@font-face
font-family: 'name-of-choice';
src: url(~@/assets/<location-to-your-font-file>/font-file-name.ttf) format('font-type');
我观察到，如果我们一次使用不带双引号的解决方案，然后添加双引号，它会再次起作用！如果有人知道这里发生了什么，请回答。
解决方案： 尽量不要在引号中包含 URL字符串。
【讨论】：
使用vue-cli脚手架快速搭建单页面组件
在使用vue-cli时我们先了解一下什么是webpack。Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等... 查看详情
安装node.js，及vue-cli脚手架和webpack加载打包工具(代码片段)
node.js安装(以Windows版本安装v12.0.0版)Node.js是一个跨平台JavaScript运行环境，使开发者可以搭建服务器端的JavaScript应用程序MND介绍：https://developer.mozilla.org/en-US/docs/Glossary/Node.js官网地址：1.官网下载node.js途径：网址 查看详情
无法使用 webpack 加载 Node 原生插件
】无法使用webpack加载Node原生插件【英文标题】：CannotloadNodenativeaddonswithwebpack【发布时间】：2019-02-2102:20:26【问题描述】：虽然我在示例代码中使用vue-cli来生成webpack配置，但没有什么是vue特有的。我这样创建示例应用程序：vuei... 查看详情
在 Webpack 2 中使用 TypeScript 加载 SASS 模块
】在Webpack2中使用TypeScript加载SASS模块【英文标题】：LoadingSASSModuleswithTypeScriptinWebpack2【发布时间】：2018-01-0618:59:04【问题描述】：我有一个使用TypeScript、ReactJS和SASS设置的简单项目，并希望使用Webpack将其全部捆绑。有大量关于... 查看详情
在 React 项目中使用 System.import 进行 Tree Shaking 和延迟加载的 Webpack 2 配置
】在React项目中使用System.import进行TreeShaking和延迟加载的Webpack2配置【英文标题】：Webpack2configurationforTreeshakingandlazyloadingwithSystem.importonReactproject【发布时间】：2017-06-1404:44:30【问题描述】：我是webpack2的新手，它是延迟加载，到... 查看详情
vue-loader是什么和vue-cli脚手架的使用
...崇的模块化开发，那么requirejs和seajs以及现在非常流行的webpack都是模块化开发的工具，在以前，例如在requirejs中，可以依赖加载某些js文件，例如：require（main.js）但是无法加载css，图片等等文件。在新潮的webpack中，强调所有资... 查看详情
查找我使用 vue-cli 生成的图像 Webpack-simple 和 Vuejs 的问题
】查找我使用vue-cli生成的图像Webpack-simple和Vuejs的问题【英文标题】：IssuetofindmyimagesWebpack-simpleandVuejsgeneratedwithvue-cli【发布时间】：2016-11-1405:36:03【问题描述】：我有以下文件夹结构：由于我的应用程序很简单，我不需要管理员... 查看详情
vue-cli 加载器不适用于 webpack-simple 的默认初始化
】vue-cli加载器不适用于webpack-simple的默认初始化【英文标题】：vue-cliloadernotworkingwithdefaultinitforwebpack-simple【发布时间】：2017-08-1510:00:27【问题描述】：我正在学习Vue.JS。我安装了cli并创建了一个项目：$npminstall-gvue-cli$vueinitwebpack... 查看详情
vue-router路由vue-cli脚手架和模块化开发之vue-cli2.x脚手架工具基于webpacksimple模板与基于webpack模板构建项目
Vue-CLI2.x脚手架工具基于webpacksimple模板构建项目 vue-cli是一个基于vue.js进行快速开发的完整系统。基于webpack构建，并进行默认配置，可通过插件扩展，可升级；vue-cli帮我们创建基本项目结构，跳过繁琐的项目配置环节，... 查看详情
vue-loader：如何在 webpack 4 和 vue-cli3 中使用 vue-loader v15
】vue-loader：如何在webpack4和vue-cli3中使用vue-loaderv15【英文标题】：vue-loader:howtousevue-loaderv15inwebpack4andvue-cli3【发布时间】：2019-05-0411:54:03【问题描述】：我使用最新版本的vue-cli3webpack4和vue-loaderv15。我想配置vue-loader，但是出现错... 查看详情
vue webpack 模板（通过 vue-cli）以后会变得更容易使用吗？
】vuewebpack模板（通过vue-cli）以后会变得更容易使用吗？【英文标题】：Doesthevuewebpacktemplate(viavue-cli)becomeeasiertouselateron?【发布时间】：2017-02-2320:27:07【问题描述】：背景开始一个新的vue.js(2.0)项目。我曾在其他项目(vuejs-templates/w... 查看详情
使用 vue-loader 和 webpack2 加载 Stylus 库和全局工作表
】使用vue-loader和webpack2加载Stylus库和全局工作表【英文标题】：LoadStyluslibraryandGlobalsheetwithvue-loaderandwebpack2【发布时间】：2017-07-0509:19:56【问题描述】：我正在尝试将我开始使用bourgeontemplate的项目迁移到Quasarframework。在这个过程... 查看详情
vue-cli3使用dllplugin实现预编译，提升构建速度(代码片段)
...79117f7d26我目前做了这些：（1）vue-cli2升级到vue-cli3，顺便webpack2升级到webpack4，构建速度一下子从3分钟左右提升到不到1分钟（vue-cli3升级过程https://www.cnblogs.com/XHappyness/p/9989693.html）（2）使用DllPlugin进行预编译，过程如下：· ... 查看详情
webpack5项目搭建vue-cli（配置优化）(代码片段)
step1–实现对Element-plus的按需加载1、安装依赖npmielement-plus//自动导入需要的依赖npminstall-Dunplugin-vue-componentsunplugin-auto-import2、webpack配置//webpack.config.jsconstAutoImport=require('unplugin-auto-import/we 查看详情
webpack配置scssless全局样式（自定义的，vue-cli2/3）
...用SASS@import规则，因为它会降低增量构建的速度。直接在webpackconfig中的sassResources数组中添加导入的文件。以scss为例,在自己配的webpack,和vue-cli2/3中配置全局样式引入（sass-resources-loader也可以用来配置less）确保package.json有node-sass... 查看详情
vue-cli的安装使用
...;：表示模板名称，vue-cli官方为我们提供了5种模板， webpack-一个全面的webpack+vue-loader的模板，功能包括热加载 查看详情
vue-cli2.0项目添加骨架屏(代码片段)
1、创建项目npminitwebpackproject3、下载 vue-skeleton-webpack-plugin 插件 npminstall vue-skeleton-webpack-plugin3、在src目录下添加entry-skeleton.js入口文件和要添加的骨架屏Skeleton.vue组件,附下图： 4、在build目录下创... 查看详情
使用 Vue-cli 和 Three.js 加载 STL 文件
】使用Vue-cli和Three.js加载STL文件【英文标题】：LoadingSTLfileswithVue-cliandThree.js【发布时间】：2021-05-2615:29:06【问题描述】：我目前遇到的问题是我无法将STL文件加载到通过vue-cli创建的three.js场景中。使用vue-cli\'vueinitwebpackProjectName\... 查看详情