vue中使用rem布局

const HtmlWebpackPlugin = require; // html打包。// 从所有 JavaScript 条目中提取现有源映射。// 这包括内联源映射以及通过 URL 链接的地图。所有源地图数据都传递给 Webpack 进行处理

viewportWidth也是vw布局从配置上来说比rem布局简洁了很多，bu需要配置安装lib，也不需要增加一个rem.js文件。在vue.config.js中找到loaderOptions，如果没有的话需要在css属性下增加postcss. selec

为一个网站选择类型尺寸是项艰巨的任务. 标题和段落的尺寸在网页布局和可读性方面处理起来很棘手. 谢天谢地, 我们有模块化缩放可以引导我们.在版面中应用的模块化比例实现了视觉层次效果与和谐的比例。它们提供了一组数值作为字体尺寸和间距的方针。在web内容中实施

//css兼容性处理：postcss --> postcss-loader postcss-preset-env. //帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式

在 这里 display:flex 需要兼容性处理，webpack 编译打包时，需要使用postcss-loader 这个loader 和 postcss-preset-env 这个插件，它帮postcss找到package.json中browsersli

postcss-pxtorem是一款将px转换成rem格式的方式，本质上是以html标签的fontsize值为基准，动态改变元素的各种计量单位。网上看到在安装后vue项目根目录下会自动生成一个postcss.config.js的配置文件，但是笔者在安装导入

介绍postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值。下面提供了两种方法解决这种第三方框架的组件出现缩小的问题，下面均以vant-ui为例：。在根目录下新建postcs

rem是根元素中的font-size值。rem布局不多赘述，有很多详细说明rem布局原理的资料。简单的说，通过JS获取设备宽度动态设定rem值，以实现在不同宽度的页面中使用rem作为单位的元素自适应的效果。const baseSize = 192; //

刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功，后来经过自己不断尝试之后终于成功了。

webpack4.0从零开始单页（多页）应用配置 (一)webpack4.0从零开始单页（多页）应用配置(二). 一些css3样式需要添加各个厂家的前缀才能生效，而现在css3运用比较长见，显然我们没必要在每个地方去添加前缀。相对在extract-text

vue-cli3 项目postcss-pxtorem的配置放在vue.config.js中。selectorBlackList: [".van"],// 要忽略的选择器并保留为px。propList: ["*"],

最近基于vue-cli2 学习webpack，将vue-cli2的webpack配置强撸了一遍，感觉身体已被掏空。。。但还是收获不少的，起码掌握了webpack的一些基本套路、开发环境和生产环境的概念、根据不同的环境写不同的webpack配置、和一些常用插

...是es6的对象扩容运算符，目前babel暂不支持，需要引入新的包来解决，要安装一个babel插件翻译对象展开运算符语法。"plugins": ["transform-object-rest-spread"] /

再聊移动端页面适配，rem和vw适配方案！基准：750设计稿；目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；――最大程度减少工作。很久之前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性

焦点比较页面渲染的方式来自谷歌团队的页面渲染实践总结。从服务端渲染到客户端渲染，不同的页面渲染方式，对页面性能、用户体验和 SEO 都有不同程度的影响。没有银弹，开发者应该根据实际情况来选择。教程JS 开发者成长的9个阶段作者概述了 JS 开发者从入门到精

节点类型postcss会将我们的css生成ast，然后会去遍历它，在遍历的过程中会传给我们一些不同类型的节点对象，我们主要需要了解的几个类型：

写在前面的话前端工程化日益成熟今天，我们对于工具越来越深的封装。不管是从vue-cli的3.0版本起，还是umi、bigfish 等前端脚手架，对于webpack都封装在内，对于工程化无疑是高效的，但也在一定程度上让新手们者失去了从零配置一个项目的机会，所

不过我个人习惯仅安装在项目中，于是我没有选择安装CLI，而是直接在项目中安装PostCSS，

package.json来制定名单，需要哪些npm包来参与到项目中来，npm install命令根据这个配置文件增减来管理本地的安装包。这里面存放着我们项目的配置项，比如引入的依赖、项目作者、项目版本、项目编译启动的命令、还有就是dependencies和

前言原谅我取这样的标题，我知道 postCss 对于大多数前端开发者来说早已经很熟悉了，但是楼主作为一个初出茅庐的前端er，还有好多的工具和技术没接触过，说来惭愧。虽然平时也喜欢使用css预处理器比如 sass、less、stylus，但是关于css的其他

vw解决方案早有耳闻，我也很想上手尝试一下，所以想要自己上手配置一个CRA脚手架的解决方案。在自己动手之前也先查了一些资料，其中Ghan的这篇博客很有帮助：使用create-react-app脚手架搭建vw-layout解决方案。和Ghan的方案不同，我研

前言：我司是一个教育公司，最近要做一个入学诊断的项目，领导让我开始搭建一套基于vue的H5的开发环境。在网上搜集很多的适配方案，最终还是选定flexible方案。选择它的原因很简单：。它的github的的star高达8k+，证明用的人还是很多的；里面有对应

随着技术的发展，目前css已经发展到了第三阶段css3.css3能够支持更多的动效，以前需要用js来实现的动画、过渡，计算等功能，如今大多都能够用css来实现，而且性能更佳。当然，随着业务的需要，在编写css过程当中，为了能够让css具备js的可复用性，灵

啰嗦一哈最近基于vue-cli2 学习webpack，将vue-cli2的webpack配置强撸了一遍，感觉身体已被掏空。。。但还是收获不少的，起码掌握了webpack的一些基本套路、开发环境和生产环境的概念、根据不同的环境写不同的webpack配置、和一

npm install px2rem-loader对webpack进行配置。进入build文件夹对utils.js中的postcssLoader做如下修改。]remUnit后的数字为设计稿宽度的十分之一之后在全局引入flexible.js,在main.js

为了使我们的项目兼容各种浏览器，我们可能会在开发中写大量的前缀。即使有了IDE为我们提供了便捷的方式。但是仍然需要我们去花时间和精力。而这样会浪费我们很多的时间。为了在开发中提升团队的开发效率，并且同时节省时间，我们引入了autoprefixed。搭配we

在PostCSS官网有着这样的对PostCSS特性介绍，箭头后面是对应功能的插件及其github地址。increase code readability → AutoprefixerUse tomorrow's CSS ,today!→ postcss-c

今天做练手项目部署的时候碰到了个奇怪问题，开发环境里显示得好好的CSS prefixer样式，到production环境就消失了。我开发环境用的是 scss ，刚开始我还以为是 scss 处理器的问题，后来研究了下 build 脚本，发现人家把CSS统一用

web 前端发展迅速，为拓展自己的视野，先整理下常见的名词和概念。Browserify的原理：部署时处理代码依赖，将模块打包为一个文件。可以解决单个文件的问题，代价是增加依赖维护成本。这可以使得团队内的 CSS 书写更为规范且具有一致性。Stylelint

1 安装vue-cli略2 sass和postcss-px2rem第一步 ：安装sass 部分cnpm install sass-loader --save-Dcnpm install node-sass --save-Dpostcss-px2rem 部分

起因今天，用 VS Code 打开一个前端项目，项目中的前端样式文件，使用的是 postcss 语法，文件后缀名是 .css。打开后缀为 .css 文件的时候，所有 postcss 中跟 css 语法不同的语句都报了错误提示，实例见下图：。解决找到了一个很

//path.resolve:把一个路径或路径片段的序列解析为一个绝对路径。fs.writeFile;通过postcss解析文件。uppercamelcase使用实例const upperCamelCase = require;

VSCode下让CSS文件完美支持SCSS或SASS语法方法习惯Webpack + PostCSS后, 通常PostCSS都是直接对CSS文件进行处理, 但是大部分习惯SCSS/SASS/LESS的朋友也许不适应了. 我专门研究了一下, 在Visual S

npm run dev这时报错 Error: No PostCSS Config found in... 本以为是 GitHub 上传的问题，后开又试了两回，发现问题依然存在，于是就开始网上寻找办法。npm run dev完美运行。

一般来说介绍一个东西都是要从是什么，怎么用的顺序来讲。我感觉这样很容易让大家失去兴趣，先看一下postcss能做点什么，有兴趣的话再往下看，否则可能没有耐心看下去。postcss本身并不直接用于处理样式，只有配合它的插件，才能完成相关的编译工作。}这时候就

前言上文讲到通过同构服务端渲染，可以直出html结构，虽然讲解了样式，图片等静态资源在服务端引入问题的解决方案，但是并没有实际进行相关操作，这篇文章就讲解一下如何让样式像html一样直出。npm install postcss-loader postcss

更改js的时候可以正常编译以及刷新浏览器。可是每次修改css保存的时候页面就会报这个错误。很无奈，不知道如何修改。这可能就是工程化带来的副作用之一吧。怀疑是postcss的问题。也确实是向这个方向查找的，每次搜索都在这postcss关键字，查找无果。原因是

}配置时 extensions 第一个参数不能是空，改为 extensions:['.js','.jsx']. 问题二：配置postcss有误，webpack2.0以上不再允许配置自定义属性，需要再plugin中定义修改前。require //调用auto

vue-webpack-boilerplate是vue-cli脚手架的一个项目模板。在使用 Git 进行版本控制的时候，有些文件是无需纳入 Git 管理的，通常都是些自动生成的文件，像日志或者编译过程中创建的文件。我们可以创建一个名为 .gitignore

前言现在的前端，javascript的发展有目共睹，框架林立。同时，html也是齐头并进，推出了HTML5标准，并且得到了普及。这样的发展却唯独少了一个角色？CSS，就是这个看似不起眼的家伙，却在开发中发挥着和js一样重要的作用。css，是一种样式脚本，好

}PS：2017.07.30补充================= start ==================以上配置时postcss-loader的版本为1.3.3若postcss-loader的版本为2.0.0-2.0.2，以上配置会报错，201

在前面两篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助，本文作为《你不知道的CSS》系列的第三篇文章，将继续在CSS技巧方面进行探讨，不同于前

利用PostCSS解决移动端REM适配问题上一期有提到结合postcss-px2rem插件来处理移动端适配的方案，以及相关的避坑方法，之后总觉得这个解决方案问题太多，也就诞生了另一套方案运用postcss-pxtorem插件来进行处理。那么这期番外篇讲的就

PostCSS常用插件介绍继上一次PostCSS学习指南（一）后，渐渐开始在项目中应用。这次决定主要讲解一些个人认为非常有帮助的PostCSS插件。方便的写规范的css，它会为你提供非常完整的hack兼容方案的。当然这里需要了解一下的是，它的大部分兼容数据

PostCSS介绍PostCSS是一个利用JS插件来对CSS进行转换的工具，这些插件非常强大，强大到无所不能。其中，Autoprefixer就是众多PostCSS插件中最流行的一个。截至目前PostCSS已经有超过200个插件，你可以插件列表查找有没有你所

背景众所周知，在weex开发中，CSS的书写一直是一个痛点。解决思路对于问题1，受限于weex底层的实现，目前并没有办法能够解决。对于问题3，可以联想到weex中的布局方案其实与手淘的flexible布局方案如出一辙，因此只需要一个工具实现同等转换，将CS

还未看的，可以点击查看上两篇文章哟：Webpack 最佳实践总结(一)、Webpack 最佳实践总结(二). 整合 CSS 加工流有时候，前端项目中除了 JavaScript 外，还有一个更重要的 CSS 需要我们花点精力进去。CSS 工作流指什么？好的工

前面两部分把重点放在了 MobX 基础模块的构建上。用这些模块我们可以开始解决一些现实场景的问题了。这篇文章将会通过一系列的示例来应用我们已经了解的概念。所有示例都没有使用 @decorator 的语法来实现。这样可以让你在 Chrome 控制台、Node

之前在简书上看到一个webpack入门，讲得确实很清楚，但是因为博主用的是1.x的版本，和现在普遍默认安装的2.x版本有一些细节上的差距，所以实际使用的时候就会遇到一些坑，对于想入门的小白如我，造成了不小的困扰。于是，干脆整理了一下我遇到的各种报错，以备所