让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法

最新推荐文章于 2024-08-16 11:06:00 发布
最新推荐文章于 2024-08-16 11:06:00 发布
阅读量6.9k 收藏 2
点赞数 1
分类专栏： vue webpack 文章标签： vue postcss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XuM222222/article/details/81501931
版权

让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法

这里写图片描述

图中&属于postcss的语法，这样书写样式可以清楚的看出选择器之前的层级关系，非常好用。在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的，这样写不会报错，但是样式不生效。为了让项目中的vue文件支持这种写法，需要在配置postcss-cssnext模块。

1、往项目中安装postcss-cssnext模块；

npm install postcss-cssnext --save-dev

安装完后，会在项目的package.json文件的devDependencies对象中看到postcss-cssnext模块的信息：

这里写图片描述

这里写图片描述

2、在build文件夹下面的vue-loader.config.js文件中配置postcss-cssnext模块；

最低0.47元/天 解锁文章
xm2by
关注
专栏目录
postcss-nesting:相互嵌套样式规则
05-12
PostCSS嵌套 使您可以按照规范将样式规则彼此。 a , b { color : red; & c, & d { color : white; } } /* becomes */ a , b { color : red; } a c, a d, b c, b d { color : white; } 注意：在此项目的未来版本中，不建议使用@media类的嵌套规则，因为它们不是嵌套建议的一部分。 在评论中，CSSWG成员表示有兴趣在处理选择器嵌套时处理嵌套的@media 。 因此，过时的嵌套规则已被暂时延迟。 用法 将添加到您的项目中： npm install postcss-nesting --save-dev 使用处理CSS： import postcssNesting from 'postcss-nesting' ; postcssNestin
在VUE2.0中使用PostCSS
weixin_33985507的博客
11-04 990
作者：滴滴公共前端团队 - J 在写 vue 组件样式时，有时为了兼容需要不停的写 -webkit-，即使复制粘贴也不能提升我们码 css 的幸福感，又有时我们想使用一下 BEM 风格的命名，但是长长的名称外加分隔符敲起来十分烦人。 其实在 vue-loader 中仅需要简单的配置即可拯救我们。 vue-loader 中 PostCSS 配置 vue-loader 中使用了 PostCSS 来处理...
vue项目实现postcss-pxtoremvue大屏适配
最新发布
故里的博客
08-16 466
vue项目实现postcss-pxtoremvue大屏适配，并配合手动转换rem实现echarts中grid设置
vue-cli引入postcss插件
qq_40067879的博客
12-29 2818
利用 vue-cli引入第三发postcss插件的过程 默认情况下vue-loader 也是按postcss进行css加载的 故修改webpack配置文件跟平时不太一样 如下提供三种方法（以填入tailwindcss插件为例） （1）直接在根目录的postcssrc.js添加插件（插件名称用引号括住 后面的大括号是插件选项）。. (2)删除postcssrc.js 在根目录下建立postcss.c...
vue 文件添加postcss postcss-loader
txl910514的专栏
07-24 9199
首先install  autoprefixer 然后在根目录添加.postcssrc.js 内容为 module.exports = { "plugins": { // to edit target browsers: use "browserlist" field in package.json "autoprefixer": { } } } 或者在p
postcss支持vue/less/css/sass文件
weixin_34102807的博客
05-03 399
使用vue-webpack初始化的构建环境，想要让px2rem同时支持.vue和.less文件的px转换的正确、优雅的配置是如何的？ vue-webpack的默认配置下，如果安装了postcss-loader和postcss-px2rem，那么.vue文件中样式部分的px会转换成rem。 为了让它也支持.less/.css文件中的px转r...
vue-cli脚手架的.babelrc文件用法说明
10-14
`.babelrc` 文件是 Vue CLI 脚手架中的一个重要配置文件，用于定义 Babel 的转码规则和插件。Babel 是一个广泛使用的 JavaScript 编译器，它允许开发者使用 ES6+ 甚至实验性语言特性，然后将这些新特性转换为广泛...
详解vue-cli脚手架中webpack配置方法
12-03
Vue CLI 是 Vue.js 的命令行工具，用于快速搭建基于 Vue.js 的项目。它集成了许多配置，包括 Webpack。Webpack 是一个强大的模块打包工具，它能够处理 JavaScript、CSS、图片等静态资源，将它们打包成优化过的静态...
【不使用vue-cli脚手架 搭建Vue2.0项目环境】
qq_46106080的博客
12-17 1812
项目创建目录结构 一、初始化 npm init -y 二、安装依赖 2.1生产环境依赖 npm install vue vue-router -S 2.2开发环境依赖 npm install babel-loader babel-core vue-loader node-sass sass-loader css-loader style-loader webpack webpack-cli webpack-dev-server html-webpack-plugin vue-template-c
解决vue-cli脚手架打包后vendor文件过大的问题
10-17
总结一下，解决Vue CLI脚手架打包后vendor文件过大的问题，主要可以从以下几个方面着手： 1. 将不常更改的库通过CDN引入，减少vendor文件的大小。 2. 配置Webpack的externals，使Webpack不打包CDN引入的库。 3. ...
postcss-nesting, 嵌套样式规则互相 inside，遵循CSS嵌套规范.zip
10-10
postcss-nesting, 嵌套样式规则互相 inside，遵循CSS嵌套规范 PostCSS嵌套 使用 PostCSS嵌套插件，你可以按照 CSS嵌套插件规范，将样式规则设置为。a, b { color: red; & c, & d { c
vue打包--TypeError: this.getOptions is not a function（关于postcss-loader）
qq_35353972的博客
04-02 1449
问题的分析：这个实际上就是 postcss-loader 的版本过高，不兼容 getOptions 函数方法，所以需要对 postcss-loader 进行降级处理。运行以上命令下载降级版本的 postcss-loader，这个问题就可以解决了。
PostCSS 以及 cssnext语法
weixin_33842304的博客
05-24 262
本文是对近两天学习postcss的总结，在这里分享给大家。 如有错误，还请指正！ 什么是postcss postcss 一种对css编译的工具，类似babel对js的处理，常见的功能如： 1 . 使用下一代css语法 2 . 自动补全浏览器前缀 3 . 自动把px代为转换成 rem 4 . css 代码压缩等等 postcss 只是一个工具，本身不会对css一顿操作，它通过插件实现功能，auto...
如何在vux项目中同时使用postcss和less
ljt123456765的博客
05-31 2737
最近写公司要写一个公众号商城，由于vux是基于vue的，学习成本较低，对比了几个框架后选择了vux。总结下在vux中遇到的坑。    按照vux官网使用vue-cli创建项目模版，在npm install就遇到了坑，直接卡死在了下载core.js那，可能是公司网不好，果断换cnpm下载就成功了。    写移动端适配是个问题，所以我们选择了紧跟大公司的步伐，选择了postcss，详细使用参考如何在V...
PostCSS 常用插件与语法介绍
weixin_34124577的博客
04-03 1326
前言 两年前自己就开始学习 PostCSS ，但在开发中使用却不到一年。 没有使用的原因是觉得 PostCSS 插件太多，学习成本很高。 但在开发中实际使用后，觉得 PostCSS 还是有很大的便捷性，诸如自动补全浏览器前缀这一功能就节省了很多时间，把繁琐的工作交给了程序，心思都集中在代码逻辑上，会让开发的过程轻松不少。 PostCSS 是什么 PostCSS 是一个用 JavaScript 工...
推荐糖语法：PostCSS SugarSS - 你的CSS新甜点！
gitblog_00010的博客
04-13 860
推荐糖语法：PostCSS SugarSS - 你的CSS新甜点！ sugarssIndent-based CSS syntax for PostCSS项目地址:https://gitcode.com/gh_mirrors/su/sugarss 项目简介 是一个灵感源于 Sass 的 CSS 解析器，它是 [PostCSS](https 生态系统的一部分。PostCSS是一个用于转换CSS的工...
Vue CLI：全局CLI配置
Alex
07-08 977
配置参考 全局 CLI 配置 有些针对 @vue/cli 的全局配置，例如你惯用的包管理器和你本地保存的 preset，都保存在 home 目录下一个名叫 .vuerc 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。 你也可以使用 vue config 命令来审查或修改全局的 CLI 配置。 目标浏览器 browserslist 你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览
初探PostCSS
justforuse的博客
07-08 3632
PostCSS是什么？官网如是介绍： PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. 我的理解
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值