flexiable 在webpack中的配置

标签: flexible
21人阅读 评论(0) 收藏 举报
分类:

本文转自http://hjingren.cn/2017/03/15/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%B1%8F%E5%B9%95%E9%80%82%E9%85%8D%E7%9A%84%E8%A7%A3%E5%86%B3/

手淘的 lib-flexible + rem

安装 lib-flexible

npm i lib-flexible –save

引入 lib-flexible
在项目入口文件 main.js 里 引入 lib-flexible

// main.js
import ‘lib-flexible’

html标签配置
<meta name="viewport" content="width=device-width, initial-scale=1.0">

px 转 rem
实际开发中,我们通过设计稿得到的值单位是 px,所以要将 px 转换成 rem 再写进样式中。
将 px 转换成 rem 我们将使用 px2rem 这个工具,它有 webpack 的 loader:px2rem-loader

npm i px2rem-loader –save-dev

配置 px2rem-loade

在 vue-cli 生成的 webpack 配置中,vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。

// utils.js
var cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: options.sourceMap
  }
}
var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75  //如果ui图是750的这里就设置750,根据图尺寸/10得出
  }
}
// ...
//在下面的loader数组中加入px2remLoader
// utils.js
function generateLoaders(loader, loaderOptions) {
  var loaders = [cssLoader, px2remLoader]
  // ...

之后写页面就可以使用px了,按照ui图来写就可以了

查看评论

vue+webpack项目中px2rem的例子

vue+webpack项目中px2rem的例子
  • dq674362263
  • dq674362263
  • 2017-12-07 14:26:28
  • 2559

webpack中的loader的配置

安装babel: npm install --save-dev babel-loader babel-core 配置babel如下所示: 这里path是nodejs提供的接口,__dirn...
  • qq_33235279
  • qq_33235279
  • 2017-04-26 08:52:50
  • 2311

webpack详细配置解析

阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本...
  • itKingOne
  • itKingOne
  • 2017-04-12 17:58:02
  • 2827

webpack中alias别名配置

webpack的alias匹配问题初现在模块开发过程中,我们可能会对可以复用的组件封装成一个可被git管控的模块,并在引用的过程中采用 带版本号的方式引用 ,这就要求我们在webpack.中添加相关a...
  • fengyun125a
  • fengyun125a
  • 2016-12-23 01:30:37
  • 4195

webpack 配置总结

entry入口文件配置:配置entry入口配置有三种写法,每一个入口称为chunk。 字符串: entry: ‘./index/index.js’: 配置模块会被解析为模块,并在启动时加载。ch...
  • jl244981288
  • jl244981288
  • 2016-12-11 09:47:10
  • 1824

Webpack基本配置介绍

webpack基本配置的介绍 webpack详细介绍 entry和output配置 plugin插件 loader加载器 webpack...
  • mutouafangzi
  • mutouafangzi
  • 2018-02-26 15:40:03
  • 108

webpack中output配置

output: { path: path.resolve(__dirname, "public/assets"),// 编译文件的输出路径 publicPath:"./...
  • MisTTT
  • MisTTT
  • 2017-06-23 11:33:38
  • 1076

配置React的Babel 6和Webpack 2环境

Facebook的一帮子工程师在忙碌之余开发除了一套前段UI框架React。这个框架最大的有点就在于让UI的开发都基于组件,这样View都是根据props和state变化的。虽然学React比起来其他...
  • future_challenger
  • future_challenger
  • 2016-08-31 22:42:24
  • 3834

webpack resolve extensions 配置

配置默认扩展名 1.需要有一个默认空字符串“”,否则在require 全名的时候反而会找不到 2.默认值是[“”, “.webpack.js”, “.web.js”, “.js”]参考文档:htt...
  • ISaiSai
  • ISaiSai
  • 2016-11-02 20:26:00
  • 6969
    个人资料
    持之以恒
    等级:
    访问量: 11万+
    积分: 3278
    排名: 1万+
    淘宝精品推荐