flexiable 在webpack中的配置

你的名字 2022-05-27 10:09 180阅读 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/][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图来写就可以了

[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]: 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/

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关使用webpack中的externals配置项如何配置

externals配置项用于配置那些不需要打包进应用程序中的第三方依赖。在webpack配置文件中，可以使用以下方式配置externals: module.exp

深碍√TFBOYSˉ_/ 2024年03月26日 08:59/ 0 赞/ 38 阅读

相关 antd 在webpack.config配置主题色

> 虽然官方提供了craco-less 来覆盖less-loader 提供的 less 变量，但自己也想试着修复config来配置一下首先需要运行 [yarn eject

末蓝、/ 2023年01月01日 13:57/ 0 赞/ 225 阅读

相关 webpack配置

1、初始化package.json文件 npm init -y 2、处理ES6语法安装：npm i babel-loader babel-core ba

淩亂°似流年/ 2022年06月13日 01:29/ 0 赞/ 243 阅读

相关 vue-cli中的webpack配置

https://segmentfault.com/a/1190000008779053 版本号 `vue-cli` 2.8.1 (终端通过

今天药忘吃喽~/ 2022年06月05日 23:23/ 0 赞/ 184 阅读

相关 webpack的配置文件

const path = require('path'); module.exports = { entry

左手的ㄟ右手/ 2022年06月05日 11:55/ 0 赞/ 215 阅读

相关 flexiable 在webpack中的配置

本文转自[http://hjingren.cn/2017/03/15/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%B1%8F%E5%B9%95%E9%80%8

你的名字/ 2022年05月27日 10:09/ 0 赞/ 181 阅读

相关 webpack中babel的配置

目的：webpack，默认只能解析一部分的ES6的语法，我们需要安装babel插件，来辅助webpack解析语法。第一步：安装插件 1-1：（cnpm i ba

比眉伴天荒/ 2022年05月15日 11:35/ 0 赞/ 263 阅读

相关 webpack配置

var path = require(‘path’); var MiniTextPlugin = require(‘mini-css-extract-plugin’);

快来打我*/ 2022年05月11日 09:30/ 0 赞/ 217 阅读

相关在项目中使用Webpack

一.在项目中安装 Webpack [nodejs全局安装和本地安装的区别][nodejs] 1.创建一个项目比如：webpack\_demo

叁歲伎倆/ 2021年09月14日 06:02/ 0 赞/ 514 阅读

相关 webpack配置

1.新建文件夹 webpack-demo vscode 打开文件 -》打开控制台（只要进入文件目录中） 2.初始化webpack webpack init -

小灰灰/ 2021年08月27日 22:56/ 0 赞/ 448 阅读