PostCSS

首页 > TAG信息列表 > PostCSS

vue 中使用rem布局

安装 postcss-px2rem及px2rem-loader npm install postcss-px2rem px2rem-loader --save 2在根目录src中新建util目录下新建rem.js等比适配文件 // rem等比适配配置文件 // 基准大小 const baseSize = 16 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 1920

Vite-Config

Vite文档 vite.config.js import postcssPresetEnv from 'postcss-preset-env' export default defineConfig({ resolve:{ alias:{ "@": path.resolve(__dirname,"./a.js") } } optimizeDeps:{ exclu

h5页面height设置100vh在safari浏览器显示问题和安卓对比一下

看图: 没错, ios默认浏览器 100vh 包含了工具栏; 安卓却不包含解决1： height:100vh 改为 height: 100% 前提你父级元素也要100% 解决2：mounted中加入safariHacks()函数，监控可视区样式，重新定义页面高度 mounted() { this.saf

vue 开发H5适配方案

一、通过JS实现适配　　1、清除浏览器默认样式　　　　创建reset.css，在main.js中importreset.css 　　2、实现页面自适应（rem方式在750下1rem=100px），在index.html文件中进行配置　　　　<script>　　　　　　(function () { 　　　　　　// 在标准 375px 适配下，100px =

react antd-mobile 适配移动端

1. react antd-mobile 适配移动端参考：https://www.jb51.net/article/215386.htm 1.报错：Error: require postcss-flexbugs-fixes use postcss 8 原因：postcss-flexbugs-fixes 版本太高解决：npm i postcss-flexbugs-fixes@3.2.0 -S 2.报错：plugin is not a funtion

在Webpack 5 中如何进行 CSS 常用配置？

本文摘要：主要通过实操讲解运用Webpack 5 CSS常用配置的方法步骤前文已谈到可以通过配置 css-loader 和 style-loader，使 webpack5 具有处理 CSS 资源的能力。css-loader 首先会分析出各个 CSS文件之间的关系，把各个CSS文件合并为一大段 CSS，然后将 CSS 文件编译为 CommonJS 模块，并

Vue CLI5 自动补全css浏览器前缀配置

最近在做项目时，用了个css自动补全浏览器前缀的插件，遇到不少坑，后面解决了，做下笔记，希望帮助后来人。步骤如下： 1. 安装postcss-loader autoprefixer npm install postcss-loader autoprefixer --save-dev 2. 根目录下创建postcss.config.js文件 module.exports = { plugi

H5 适配 px 适配

1.下载 npm i amfe-flexible npm i postcss-pxtorem 2.根目录加 postcss.config.js module.exports = { plugins: { // postcss-pxtorem 插件的版本需要 >= 5.0.0 'postcss-pxtorem': { rootValue ({ file }) { // 判断是否是vant的文件如果是

Vue-项目中的移动端适配方案

一、vue实现移动端适配步骤如下 1.先安装amfe-flexible和postcss-pxtorem npm install amfe-flexible --save npm install postcss-pxtorem --save 在main.js导入amfe-flexible import 'amfe-flexible'; 2.配置postcss-pxtorem ,可在vue.config.js、postcsssrc.js、postcss.config

vue2 -- 移动端自适应（postcss-px-to-viewport）

1、安装依赖 npm install postcss-px-to-viewport --save 2、修改文件.postcssrc.js module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {},//用来处理元素容器宽高比 "

Vite处理css postcss import variable less

支持css3 variables src/styles/index.css /* css3 variable */ :root{ --main-font-color: blue } #app{ font-size: 20px; color: var(--main-font-color); } main.js import { createApp } from 'vue' import App from './App.vue' import &#

vue中使用postcss-pxtorem实现适配

vue中使用postcss-pxtorem实现适配场景:vue搭建移动端页面，main.js引入全局css报错。原因：用了postcss-px2rem与postcss-px2rem-exclude导致的问题，解决方案：卸载后postcss-px2rem，安装使用postcss-pxtorem。在postcss.config.js设置如下代码，可以自行更改设置，解决问题。

vue里使用px2rem

安装 yarn add postcss-px2rem 配置在vue.config.js中添加以下配置 const px2rem = require('postcss-px2rem') module.exports = { css: { loaderOptions: { postcss: { plugins: [ px2rem({ // 基准大小 baseSize,建议写100 因为可

5.Webpack--bable

一、Babel的作用 babel和postcss一样，不借助webpack，也可以单独使用。二、在webpack中使用babel 安装：配置：现在再打包，发现还是没有将代码进行转换，这是因为我们没有使用对应的插件。三、babel的插件如果需要转换箭头函数，就要使用箭头函数转换相关的插件：

装包报错：peerDependencies WARNING postcss-load-config@^3.0.0 requires a peer of postcss@>=8.0.9 but n

1 背景 1.1 装包 2 问题 2.1 装包报错 peerDependencies WARNING postcss-load-config@^3.0.0 requires a peer of postcss@>=8.0.9 but none was installed 3 原因 3.1 必须要先装postcss 4 解决办法 4.1 安装postcss cnpm install postcss -g 4.2 再装自己的

前端微服务之样式隔离插件代码笔记

样式隔离插件代码postcss-namespace.js如下： const postcss = require('postcss'); function specailTest(rule) { if ( rule.parent && rule.parent.name && rule.parent.name.indexOf('keyframes') > -1 ) { return true } retur

webpack(二)——css-loader,style-loader,less-loader,postcss-loader

1. css-loader 在js文件夹下新建component.js function component() { const element = document.createElement("div"); element.innerHTML = ["hello", "webpack"].join(" "); element.className = "content"

Vue ——使用lib-flexible和postcss-pxtorem 移动端实现rem适配

lib-flexible是一个制作H5适配的开源库，获取需要的JavaScript和CSS文件。实现适配 1.安装postcss-pxtorem npm i postcss-pxtorem@5.1.1 -D //-D表示开发依赖，项目上线就不需要了最新版本会报错 // 看单词拼写也懂了将px转换成rem 是一款postcss 插件 2.安装lib-flexible

同志们，该放弃移动端rem适配方案了

1.背景在做移动端各种尺寸屏幕的适配时，用的最多的就是rem方案。我们都写过这样的代码,来设置根字体大小。这个计算公式中设备宽度，UI设计稿尺寸这两个参数比较好理解，可是为什么要除以100呢，为什么不是10,50或者其它的数值呢。 const setRem = () => { const deviceWidth = do

vue 使用 autoprefixer amfe-flexible postcss-pxtorem 自动转rem移动端适配

1.首先下载需要的包(有些是运行依赖包) yarn add autoprefixer -S yarn add amfe-flexible@2.2.1 postcss-pxtorem@5.5.1 -S -D 2.在项目根目录下创建一个postcss.config.js文件，配置内容如下 // import autoprefixer from "autoprefixer" module.exports = { p

vue项目中px转rem方法（pc端）

首先安装这两个插件 npm install postcss-px2rem npm install px2rem-loader 安装好了之后新建一个文件 postcss.config.js 文件内容如下 // postcss.config.js 文件 module.exports={ plugins:[ require("postcss-px2rem")({ remUnit: 16, // 这里是配置1rem = 1

3.4 CSS预编译和PostCSS

CSS cascading style sheets 层叠样式表用来给html增加样式，是一种标记类语言 1994年，哈肯首次提出css 1996年，w3c推出了一个正式的版本 1998年，推出第二个版本 css3 1999就被提出，但是20年后才发布 CSS的缺陷是浏览器可以识别的唯一一个可以编写样式的语言初衷是为了弥补html原

03.webpack中sourceMap等配置

一、认识PostCSS工具 PostCSS是什么？ PostCSS是一个通过将JavaScript来转化css样式的工具，它可以帮助我们实现css样式的转化和适配，比如自动添加浏览器前缀来让一些css样式在不同版本的浏览器中都可以生效，比如统一原生html标签如button在不同浏览器中的样式差异等。 PostCSS的使用方

vue3.0使用vant组件的过程

创建项目 vue create yxsc_project 安装vant 组件库第一步安装命令 npm install vant@next --save (因为使用的是vue3.x 所以要安装vant的针对vue3的版本 vant@next) 第二部 vant的进阶使用通过 npm install postcss postcss-pxtorem --

React Next 配置svg-loader, 并支持svg可配置