【yy讲解PostCSS是如何安装和使用】

在这里插入图片描述

🎥博主:程序员不想YY啊
💫CSDN优质创作者,CSDN实力新星,CSDN博客专家
🤗点赞🎈收藏⭐再看💫养成习惯
✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步!

PostCSS安装和使用

  • 0. 👉前言
  • 1. 👉安装 PostCSS
    • 🌻使用npm安装
    • 🌻使用yarn安装
    • 🌻安装autoprefixer插件
    • 🌻安装cssnano插件
  • 2. 👉使用 PostCSS
    • 🎥方法一:命令行工具
    • 🎥方法二:与构建工具结合
      • ❤️Webpack中使用PostCSS
      • ❤️Gulp中使用PostCSS

0. 👉前言

PostCSS 是一个使用 JavaScript 插件转换CSS代码的工具,这些插件可以让你使用未来的CSS特性、优化CSS文件的大小,或者是在CSS文件中嵌入一些编程逻辑。可以帮助开发者自动化处理CSS代码,例如自动添加浏览器前缀、压缩代码等。

1. 👉安装 PostCSS

通常,PostCSS 是作为项目开发依赖安装的,你可以通过npm或者yarn这样的包管理器来进行安装。在你开始之前,确保你已经安装了Node.js和npm。

🌻使用npm安装

npm install postcss postcss-cli --save-dev

这里同时安装了 postcss-cli,这是PostCSS的命令行接口,可以让你在命令行中运行PostCSS。

🌻使用yarn安装

yarn add postcss postcss-cli --dev

PostCSS本身只提供了基础的CSS处理功能,需要安装其他插件来增强功能。例如,autoprefixer插件可以自动添加浏览器前缀,cssnano插件可以压缩CSS代码。在命令行中输入以下命令安装插件:

🌻安装autoprefixer插件

npm install autoprefixer --save-dev

🌻安装cssnano插件

npm install cssnano --save-dev

2. 👉使用 PostCSS

安装完毕后,你就可以开始使用PostCSS了。假设你已经有了一些CSS文件并希望通过PostCSS进行处理。

🎥方法一:命令行工具

创建一个简单的PostCSS配置文件 postcss.config.js,并在里面加入你所需要的插件:

module.exports = {
  plugins: [
    // 在这里加入你要使用的插件
    require('autoprefixer'),
    // 其他插件
  ]
};

然后你可以通过CLI命令来转换CSS:

npx postcss src/css/style.css --output dist/css/style.css

或者,如果你已经在项目中配置了package.json脚本,你也可以加入一个脚本来运行PostCSS:

"scripts": {
  "build-css": "postcss src/css/style.css -o dist/css/style.css"
}

然后在命令行中运行:

npm run build-css

🎥方法二:与构建工具结合

PostCSS通常与如Webpack、Gulp这样的构建工具一起使用:

❤️Webpack中使用PostCSS

安装所需插件:

npm install --save-dev postcss-loader autoprefixer css-loader style-loader

webpack.config.js 中配置loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')
                ]
              }
            }
          }
        ]
      }
    ]
  }
};

❤️Gulp中使用PostCSS

安装所需插件:

npm install --save-dev gulp-postcss autoprefixer gulp-sourcemaps

gulpfile.js 中配置task:

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('css', () => {
  return gulp.src('src/css/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/css'));
});

然后运行gulp任务:

gulp css

以上给出了几种安装和使用PostCSS的方法,具体使用的插件和构建过程可能会根据个别项目的需求有所不同。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/506464.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STM32 uC/OS-III

What is uC/OS-III? C/OS-III 的发音为“Micro C O S Three”,这意味着 C/OS-III 是基于 C 语言编写的第三代 小型操作系统,当然这里所说的第三代是相对于 C/OS 的前两个版本 C/OS 和 C/OS-II 而言 的,后面也会介绍这三个版本的差别。C/OS/…

Vue前端项目打包

4.1编译打包 npm run build 4.2 前端项目 nginx的配置文件default.conf 和 dockerfile default.conf upstream wms-app { server 192.168.14.3:3666 ; server 192.168.14.3:3777 ; } server { listen 80; listen [::]:80; server_name localhost; access_log /var/log/nginx…

毛利率低从哪些维度分析?零售服装行业如何提升毛利率?

在零售服装行业中,毛利率是评估公司盈利能力的关键指标之一。然而,某服装公司在一段时间内销售总额达到5878.28万,但其总毛利额仅为591.26万,平均毛利率仅为10.06%。这一数字明显低于了服装行业通常的毛利率范围(一般在…

语义分割——Dark Zurich数据集

一、重要性及意义 首先,Dark Zurich为语义分割提供了大量真实且多样化的图像数据。该数据集包含了在夜间、黄昏和白天拍摄的大量图像,涵盖了不同光照条件和场景下的图像变化。这些图像数据不仅丰富了语义分割任务的数据集,也为模型提供了更全…

政安晨:【Keras机器学习实践要点】(七)—— 使用TensorFlow自定义fit()

目录 前言 导入 来一个简单例子 下沉到更低的级别 支持样本权重和类别权重 提供您自己的评估步骤 总结:一个端到端的GAN示例 政安晨的个人主页:政安晨 欢迎 👍点赞✍评论⭐收藏 收录专栏: TensorFlow与Keras机器学习实战 希望政安晨的…

【Linux】TCP网络套接字编程+守护进程

文章目录 日志类(完成TCP/UDP套接字常见连接过程中的日志打印)单进程版本的服务器客户端通信多进程版本和多线程版本守护进程化的多线程服务器 日志类(完成TCP/UDP套接字常见连接过程中的日志打印) 为了让我们的代码更规范化&…

3万字80道Java基础经典面试题总结(2024修订版)

大家好,我是哪吒。 本系列是《10万字208道Java经典面试题总结(附答案)》的2024修订版。 目录 1、说说跨平台性2、Java是如何实现跨平台性的?3、JDK 和 JRE 有什么区别?4、为何要配置Java环境变量?5、Java都有哪些特性&#xff1f…

(八)Gateway服务网关

Gateway服务网关 Spring Cloud Gateway 是 Spring Cloud 的一个全新项目,该项目是基于 Spring 5.0,Spring Boot 2.0 和 Project Reactor 等响应式编程和事件流技术开发的网关,它旨在为微服务架构提供一种简单有效的统一的 API 路由管理方式。…

Linux/Headless

Headless Enumeration nmap 用 nmap 扫描了常见的端口,发现对外开放了 22 和 5000,而且 nmap 显示 5000 端口的服务是 upnp? ┌──(kali㉿kali)-[~/vegetable/HTB/headless] └─$ nmap 10.10.11.8 Starting Nmap 7.93 ( https://nmap.or…

打造安全医疗网络:三网整体规划与云数据中心构建策略

医院网络安全问题涉及到医院日常管理多个方面,一旦医院信息管理系统在正常运行过程中受到外部恶意攻击,或者出现意外中断等情况,都会造成海量医疗数据信息的丢失。由于医院信息管理系统中存储了大量患者个人信息和治疗方案信息等,…

神奇的css radial-gradient

使用css radial-gradient属性,创造一个中间凹陷进去的形状。如下图 background: radial-gradient(circle at 50% -0.06rem, transparent 0.1rem, white 0) top left 100% no-repeat;

vue系列——v-on

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>v-on指令</title> </head> <body>…

docker部署DOS游戏

下载镜像 docker pull registry.cn-beijing.aliyuncs.com/wuxingge123/dosgame-web-docker:latestdocker-compose部署 vim docker-compose.yml version: 3 services:dosgame:container_name: dosgameimage: registry.cn-beijing.aliyuncs.com/wuxingge123/dosgame-web-docke…

贪吃蛇:从零开始搭建一个完整的小游戏

目录 导语&#xff1a; 一、游戏框架 二、蛇的实现 三、绘制游戏界面 四、食物 五、移动蛇 六.得分系统&#xff0c;是否吃到食物 七、检查碰撞 八、处理按键事件 九、得分系统 十、游戏状态管理 导语&#xff1a; 贪吃蛇这个经典的小游戏&#xff0c;我上学的时候就…

设计模式-概述篇

1. 掌握设计模式的层次 第1层&#xff1a;刚开始学编程不久&#xff0c;听说过什么是设计模式第2层&#xff1a;有很长时间的编程经验&#xff0c;自己写了很多代码&#xff0c;其中用到了设计模式&#xff0c;但是自己却不知道第3层&#xff1a;学习过了设计模式&#xff0c;…

【机器学习】无监督学习与聚类技术:解锁数据的隐藏结构

无监督学习介绍 无监督学习&#xff0c;作为机器学习的一大分支&#xff0c;专注于探索未经标记的数据集中的潜在结构。不同于有监督学习&#xff0c;无监督学习不依赖于外部提供的标签或输出结果&#xff0c;而是通过数据本身的特征来寻找模式、聚类或降维。这种学习方法在多…

03-MySQl数据库的-用户管理

一、创建新用户 mysql> create user xjzw10.0.0.% identified by 1; Query OK, 0 rows affected (0.01 sec) 二、查看当前数据库正在登录的用户 mysql> select user(); ---------------- | user() | ---------------- | rootlocalhost | ---------------- 1 row …

PI案例分享--2000A核心电源网络的设计、仿真与验证

目录 摘要 0 引言 1 为什么需要 2000A 的数字电子产品? 2 2000A 的供电电源设计 2.1 "MPM3698 2*MPM3699"的 MPS扩展电源架构 2.2 使用恒定导通时间(COT)模式输出核心电压的原因 2.3 模块化 VRM 的优势 2.4 用步进负载验证2000A的设计难点 2.4.1 电源网络 …

初始Java篇(JavaSE基础语法)(5)(类和对象(上))

个人主页&#xff08;找往期文章包括但不限于本期文章中不懂的知识点&#xff09;&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 目录 面向对象的初步认知 面向对象与面向过程的区别 类的定义和使用 类的定义格式 类的实例化 this引用 什么是this引用&#xff1f; this引用…

Python爬虫-懂车帝城市销量榜单

前言 本文是该专栏的第23篇,后面会持续分享python爬虫干货知识,记得关注。 最近粉丝留言咨询某汽车平台的汽车销量榜单数据,本文笔者以懂车帝平台为例,采集对应的城市汽车销量榜单数据。 具体的详细思路以及代码实现逻辑,跟着笔者直接往下看正文详细内容。(附带完整代码…