关于在nuxt上配置autoprefixer的问题

最新推荐文章于 2024-05-23 16:08:37 发布
最新推荐文章于 2024-05-23 16:08:37 发布
阅读量714 收藏
点赞数
分类专栏： nuxt 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55458088/article/details/126958193
版权

nuxt文档说明nuxt2是自带autoprefixer的

但是项目搭建完之后死活都没有生效，后面看了postcss文档，autoprefixer文档说明

但是postcss官网对于autoprefixer的配置跟nuxt上配置位置不太一样

通过查看nuxt官网发现autoprefixer的配置在nuxt.config.js里面的build对象下

postcss: {

preset: {

        autoprefixer: {grid: true}

}

}

配置完之后还是没生效，也有尝试在项目中安装autoprefixer依赖作为插件引入，还是没生效

后面想到autoprefixer是根据支持的浏览器列表去添加对应前缀的，可能还是这个没配置对？

遂修改.browserslistrc配置为： last 2 version #最后的两个版本

重启项目，有了

最后再加多两个配置，最终配置：

> 1%
last 2 version #最后的两个版本
not ie <= 10

ssheepsean
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浏览器前缀处理工具Autoprefixer.zip
07-19
Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里，使用Can I Use的数据来决定哪些前缀是需要的。 所有你需要做的就是把它添加到你的资源构建工具（例如 Grunt）并且可以完全忘记有CSS前缀这东西。尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀。像这样：a{      transition :transform 1s } Autoprefixer使用一个数据库根据当前浏览器的普及度以及属性支持提供给你前缀：a{      -webkit-transition :-webkit-transform 1s;      transition
Autoprefixer：配置
weixin_40301750的博客
03-11 4867
Autoprefixer在webpack中的配置
5.5 js封装autoPrefix方法。js方法自动增加浏览器前缀
qq_40196738的博客
05-06 400
1、ref属性可以获取dom对象，同时也可以获取VueComponent对象 注意：要获取VueComponent对象的dom属性，需this.$refs.dom.$el.style.top 2、clientWidth offsetHeight 等等，都不是style属性，要获取直接，this.$refs.list.offsetWidth即可。 3、一切需要监听$el数据（并非初始化） ，都必须绑...
vue服务器渲染nuxtjs
MIR_zhang的博客
08-07 3785
但是
解决Nuxt使用axios跨域问题
01-19
而在使用时，就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。 解决跨域 Nuxt 使用 axios 为避免出现前端页面跨域问题，需要安装 @nuxt...
eslint-config：用于Nuxt.js的ESlint配置
02-05
Nuxt ESLint配置 用于Nuxt.js的配置。 用法 您是否要将配置添加到自己的项目中？ 你去了： 将此包添加到您的devDependencies $ npm i -D @nuxtjs/eslint-config # or $ yarn add -D @nuxtjs/eslint-config 如果...
Nuxt.js实战和配置详解
10-16
主要介绍了Nuxt.js实战和配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
nuxt配置通过指定IP和端口访问的实现
10-15
My bee's knees Nuxt.js project
golang websocket 发送消息莫名其妙断开的问题记录
qq_38189542的博客
05-20 185
公司需要做个B/S架构的前端展示项目，当前以为是小case，但是在实现后端功能的时候，还是被坑了。
Nodejs util file getpost web express child_process mogodb
ooo
05-18 934
Nodejs util file getpost web express child_process mogodb
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 297
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
Web Speech API（2）—— SpeechSynthesis
LiangRZ
05-21 378
Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。控制器，从而获取语音合成功能的入口。
js知识点汇总之let const 和 var的区别
最新发布
fyw1789的博客
05-23 1098
声明的变量会先在作用域中被创建出来，但因此时还未进行词法绑定，所以是不能被访问的，如果访问就会抛出错误。因此，在这运行流程进入作用域创建变量，到变量可以被访问之间的这一段时间，就称之为暂时死区。其实上面不存在变量提升的例子中，其实也是暂时性死区，因为它有暂时性死区的概念，所以它压根就不存在变量提升了。实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。中的作用域有：全局作用域、函数作用域，命令声明变量之前，该变量都是不可用的。，导致绑定这个块级作用域，
springboot+vue2+elementui实现时间段查询
2301_76604664的博客
05-20 351
将前端传来的时间数组，赋值给对应的属性；
【VueRouter 的基本使用】
2302_76611599的博客
05-17 234
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
TS中的InstanceType函数和Typeof 操作符
05-23 106
【vue中的instanceType用法】父组件用ref获取子组件时，通过 instanceType获取子组件的类型。此外，typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。尽管ES6引入了更清晰的类语法，但从类型检查的角度看，类仍然被视为函数。函数：该函数返回（构造） 由某个构造函数构造出来的实例类型组成的类型。操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。获取由某个构造函数构造出来的实例类型组成的类型。操作符可以用来获取一个变量或对象的类型。
前端开发攻略---用Vue实现无限滚动的几种方法
nibabaoo的博客
05-22 545
用vue实现无限滚动
性能监控系统搭建——node_koa实现性能监控数据上报（第一章）
编程知识分享，主打前端
05-19 803
大家好，我是yma16，本文分享node_koa实现性能监控数据上报（第一章）。为了实现前端性能耗时的数据监控，前端对外发布js的sdk，sdk的功能主要是性能耗时计算和数据上报。同时使用vue3和node开发一个数据监控的后台管理系统，主要功能是展示数据，提供一个api_key和token对外暴露的api接口去添加数据监控数据。对外暴露性能上报接口，用户通过api_key请求上报数据到后台。
nuxt项目配置nuxt
04-05
Nuxt.js是一个基于Vue.js的通用应用框架。它可以帮助我们快速搭建一个基于Vue.js的应用程序，并提供了许多有用的功能，如服务器端渲染、静态站点生成、自动代码分割、异步数据加载等。 下面是配置Nuxt.js项目的步骤： 1. 安装Nuxt.js 使用npm或yarn安装Nuxt.js： ``` npm install nuxt ``` 或 ``` yarn add nuxt ``` 2. 创建Nuxt.js项目 使用npx命令创建一个新的Nuxt.js项目： ``` npx create-nuxt-app my-app ``` 或者使用yarn命令： ``` yarn create nuxt-app my-app ``` 然后按照提示进行配置即可。 3. 配置Nuxt.js项目 Nuxt.js的配置文件是nuxt.config.js，它包含了项目的各种配置项。下面是一些常用的配置项： - mode：模式，可以设置为universal（服务器端渲染）或spa（单页面应用）。 - srcDir：源代码目录。 - buildDir：构建目录。 - head：页面头部信息。 - loading：加载动画。 - plugins：插件配置。 - modules：模块配置。 - build：构建配置。 4. 运行Nuxt.js项目 使用下面的命令运行Nuxt.js项目： ``` npm run dev ``` 或者使用yarn命令： ``` yarn dev ``` 这将启动一个开发服务器，并在浏览器中打开应用程序。 5. 构建和部署Nuxt.js项目 使用下面的命令构建Nuxt.js项目： ``` npm run build ``` 或者使用yarn命令： ``` yarn build ``` 这将生成一个dist目录，其中包含了构建好的静态文件。 要部署Nuxt.js项目，可以将dist目录上传到服务器或者使用静态站点托管服务，如Netlify或GitHub Pages。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值