一. 如何在Vue或React项目中使用自定义字体 在开发前端项目时,经常会遇到UI同事希望在项目中使用一个炫酷字体的需求.那么怎么在项目中使用自定义字体呢? 其实实现起来并不复杂,可以借用CSS3 @font-face 来实现. 本文着重介绍一下 webpack 项目如何正确打包引入的自定义字体. 可以访问 这里 查看更多关于大数据平台建设的原创文章 或 webpack系列之loader及简单的使用. @font-face有什么用 总结一下就是:用户借助该规则,可以为引入的字体包命一个名字,并

发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 !important,经过 OptimizeCssAssetsPlugin 调用 cssProcessor cssnano处理之后也是 z-index: 2. 因此,很可能是 cssnano 进行了重新计算(cssnano 称为 rebase),而且这种计算是不够准确的. 因为打包后的文件有两处 z-

亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置) 执行成功如下图所示: 然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件. 此时我们直接在浏览器中打开index.html,是会报错的,什么都看不到. 2. 安装express-generator生成

1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-loader,让webpack可以打包css文件 require('css-loader!./style.css'); 3.打包 4.引入style-loader,将样式通过style标签写到head标签里 require('style-loader!css-loader!./style.css');

参考地址:https://blog.csdn.net/i_coffer/article/details/81005733 在对vue-cli项目打包后出现index.html引入的css和js没有引号 即: <link href=/css/xxx.css rel=stylesheet> 解决办法: 找到webpack.prod.conf.js,在webpack.prod.conf.js找到minify 把minify中的  removeAttributeQuotes: true改为  remo

JavaScript Date() 对象: new Date() :时间对象,会把当前时间作为其初始值: setFullYear() :用于设置月份,可有三个参数,setFullYear(year,month,day): setHours() :设置指定时间的小时,可有四个参数,setHours(hour,min,sec,millisec): getDate() :返回月份的某一天: getMonth() :返回表示月份的数字: getFullYear() :返回一个表示年份的 4 位数字: g

@font-face { font-family: DeliciousRoman; src: url('…/Delicious-Roman.otf'); font-stretch: condensed; //拉伸 font-style: oblique; //斜体 font-weight: bold; //粗体 } url里写字体文件的路径,在线或者本地的都行.如果引入了重置样式,要在重置里把font-family的值改成你定义的名字.

加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文件 module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } 引入css到 js 中,然后在html引用该 js,完美 import css from './style.css'; functio

为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader autoprefixer --save-dev 2.在当前webpack.base.conf.js目录新建一个postcss.config.js文件 module.exports = { plugins: [ require('autoprefixer') ] } 这就是对postCSS一个简单的配置,引

1.安装webpack. npm install webpack -g 2.创建一个文件夹app. 3.新建文件test.js. require("!style-loader!css-loader!./style.css"); document.write(require('./test2')); 4.新建文件test2.js module.exports = "I'm from test2.js."; 5.新建style.css. body{ background

1. 安装css-loader 与 style-loader npm install style-loader css-loader --save-dev 2. 在webpack.config.js中配置 module.exports={ //...code module:{ rules:[ { //使用正则表达式,匹配以.css结尾的文件 test:/\.css$/, //顺序不能颠倒 use: ['style-loader','css-loader'] } ] } } 3. 使用方法 ind

有两个组件home和search 两个组件中都有class为footer的元素 但是search的footer比home的多一条background的样式 本地开发的时候没问题,但是打包之后,home也被打包上了background的样式 暂时处理方法是home和search的footer元素使用不同的class

{ test: /\.css$/, use: ExtractTextPlugin.extract({ use: ['css-loader?minimize', 'autoprefixer-loader'], fallback: 'style-loader' ,publicPath: '.3/' }) },

是webpack4和extract-text-webpack-plugin的兼容性问题 执行命令:npm install extract-text-webpack-plugin@next --save-dev 但是后来发现还是不行,要用  mini-css-extract-plugin

在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2.将字体文件引入 自己定义一个文件夹,放入下载好的.ttf文件 先自己定义一个font.css文件,将下载好的字体文件的路径引入 @font-face { font-family: "华文行楷"; src: url('stxingka.ttf'); font-weight: normal;

问题描述: 使用webpack打包vue项目,使用font-awsome字体,发现打包之后,font-awsome图标不显示,报错为路径不对 看了下打包的路径,的确路径不对,打包之后font-awsome的文件是存放在static/fonts/下的,而访问的时候static/css/static/fonts/ 原因是: build > webpack.base.conf.js 里面loader的设置 limit值要设置为大一点,至少要比字体文件大

http://lxj8749.iteye.com/blog/2287074 ********************************************** 安装webpack npm i webpack --save-dev 如果使用 -g参数,可以安装到全局使用,在当前目录安装,可执行文件为 ./node_modules/.bin/webpack 配置webpack.config.js var path = require('path'); module.exports = {

写在前面的话:  一直想着手动配置webpack实现应用,正好最近这段时间比较空闲,就写了一个通过webpack打包实现todolist的简单应用.本文内容包括:通过webpack打包css,html,js文件处理,以及图片处理.以下是配置文件内容,如果你都能看懂,那本文对你可能收效甚微.如有不解之处,敬请细看. const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const

最近在学习vue,需要用到webpack打包css,在webpack中文网https://www.webpackjs.com/里只有css的打包配置, 在编写css样式时,因为要引入 背景图片,打包时webpack就会报错,css样式如下: 使用webpack打包时报的错误如下图: 开始以为是自己的图片路径写错了,又仔细的阅读了下webpack的loader ,才知道是图片的url路没有配置,那么loader到底是什么呢? webpack中文网上的解释如下: 看完之后,,还是不懂........

一.什么是webpack webpack官网给出的定义是 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle. 如上图: 中间的蓝色块就是webpack. 他会将左边各种文件打包成右侧html能够解析的文件. 总结: webpack是一个静态的打包模块

问题描述: webpack 打包报错 Cannot assign to read only property 'exports' of object '#<Object>',这怎么破? 解决方案: 原因是:The code above is ok. You can mix require and export. You can‘t mix import and module.exports 翻译过来就是说,代码没毛病,在webpack打包的时候,可以在js文件中混用require和export