首页 > 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可配置

1、下载相关loader, 插件 yarn add svg-url-loader postcss-inline-svg --dev 2、开始配置 在根目录创建 postcss.config.js 文件,并写入 module.exports = { plugins: { 'postcss-inline-svg': {removeFill: false}, }, } 修改next.config.js配置 webpack(config)