vite postcss-程序员宅基地

技术标签: css  python  java  vue  js  

PostCSS

  • PostCSS是一款使用JavaScript插件对CSS实现转换的工具
  • PostCSS拥有非常强大的插件,典型的比如autoprefixercssnextcss modules等。
  • PostCSS插件的处理方式类似CSS预处理器,而非预处理器和后处理器。
  • PostCSS并非优化CSS的工具,语法也并非CSS的新式语法。

Vite自身已经集成PostCSS,无需再次安装。另外也无需单独创建PostCSS配置文件,已集成到vite.config.jscss选项中。可直接配置css.postcss选项即可。Vite将自动在*.vue文件中所有的style标签以及所有导入的.css文件中应用PostCSS.

$ vim vite.config.js
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

import postcssImport from "postcss-import"
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'


export default ({mode})=>{
  //生成自定义用户配置
  return defineConfig({
    //样式表插件
    css:{
      postcss:{
        plugins:[
          postcssImport,
          autoprefixer,
          tailwindcss
        ]
      }
    }
  })
}

PostCSS插件:嵌套CSS样式写法解决方案

插件 描述
postcss-import 支持@import写法
postcss-url 支持@url写法
postcss-bem 支持BEM元素规则命名
postcss-nested 支持类选择器嵌套写法,模拟SASS嵌套选择器写法。
postcss-nesting 支持符合W3C规范的嵌套类选择器写法
postcss-simple-vars 支持变量
postcss-advanced-variables 支持类似SASS自定义变量并引用,实现编写变量、条件、循环。
postcss-preset-env 支持变量运算

PostCSS插件:H5移动端屏幕适用性解决方案

插件 描述
cssnano 优化和压缩CSS,已包含autoprefixer插件。
postcss-aspect-ratio-mini 容器比匹配
postcss-cssnext 实现嵌套编程
postcss-px-to-viewport 将px转换为vw以适应各种屏幕
postcss-write-svg 1px细线的绘制

Import

PostCSS通过@import将样式表合并到一起,当需要通过@import将第三方类库导入到主样式表时,首先需要运行的是@import插件。

插件 描述
postcss-import 支持通过内联内容来转换@import规则
postcss-partial-import 让CSS文件支持@import语法,支持W3C的写法,也支持SASS写法。

postcss-import

安装插件

$ npm ls postcss-import
$ npm info postcss-import
$ npm i -D postcss-import@latest

postcss-partial-import

Autoprefixer

  • Autoprefixer是一个根据Can I Use解析CSS并为其添加浏览器厂商前缀的PostCSS插件
  • Autoprefixer会使用基于当前浏览器支持的特性和属性为CSS添加前缀

查看项目下是否已经安装过Autoprefixer

$ npm ls autoprefixer version

使用NPM为Vue项目安装Autoprefixer

$ npm info autoprefixer versions
$ npm i -D autoprefixer@latest

在PostCSS配置文件post.config.js配置文件的插件属性中添加Autoprefixer

$ vim postcss.config.js
import autoprefixer from "autoprefixer"

export default {
  plugins:[
    autoprefixer
  ]
}

TaildwindCSS

官方网站:https://www.tailwindcss.cn/docs/plugins

  • Tailwind CSS是一款实用为主效用优先的CSS框架
  • TailwindCSS作为PostCSS插件存在,将基础的CSS拆分为原子级别。
  • PostCSS提供Autoprefixer插件用于补全各种浏览器前缀,兼容性更好。

查看项目是否已经安装TailwindCSS

$ npm ls tailwindcss version

使用NPM安装TailwindCSS

$ npm info tailwindcss versions
$ npm i -D tailwindcss@latest

为PostCSS配置TailwindCSS插件

$ vim postcss.config.js
import postcssImport from "postcss-import"
import autoprefixer from "autoprefixer"
import tailwindcss from "tailwindcss"

export default {
  plugins:[
    postcssImport,
    autoprefixer,
    tailwindcss
  ]
}

配置TailwindCSS独立配置文件

$ vim tailwind.config.js
export default {
  
}

安装VSCode插件

  • Tailwind CSS IntelliSense
  • Tailwind Docs

创建全局应用的样式表,注意必须引入postcss-import插件以支持@import写法。

$ vim src/assets/css/main.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

项目主入口文件中引入全局样式表

$ vim src/main.js
import "@/assets/css/main.css"

安装TailwindCSS插件

TailwindCSS提供了可复用的第三方插件用于扩展Tailwind,插件会注册新的样式,让Tailwind使用JavaScript代替CSS注入用户的样式表。

$ npm i -D @tailwindcss/forms
$ npm i -D @tailwindcss/typography
$ npm i -D tailwindcss/aspect-ratio
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/JunChow520/article/details/117020367

智能推荐

application run的使用_application.run 后面跟什么-程序员宅基地

文章浏览阅读472次。具体使用:http://club.excelhome.net/thread-803051-3-1.html注意事项:1、run后面跟一个字符串,路径前后需要使用'来完成,单独使用需要""2. 因为后面是字符串,需要明确空格。_application.run 后面跟什么

PGM --- 朋友啊!-程序员宅基地

文章浏览阅读1.7k次。https://www.zhihu.com/question/23255632概率图模型(PGM)有必要系统地学习一下吗?最近学习机器学习方面的理论知识,然后看到很多论文里会用到概率图模型。听有的说这个东西很有用;也有的说用处不是很大,简单了解一下就行,有概率论和贝叶斯的基本概念就行。看Koller的那本巨著感觉好厚啊。。。就想问一下这个有没有必要系统的学习?

Java之File类(01)_java filedemo01-程序员宅基地

文章浏览阅读188次。一.File类的描述 JDK API文档描述:文件和目录路径名的抽象表示形式。File 类的实例是不可变的;也就是说,一旦创建,File 对象表示的抽象路径名将永不改变。二.File类中的静态成员变量package com.xiao.filedemo;import java.io.File;/** * @Author 笑笑 * @Date 17:52 2018/04/23 */pu..._java filedemo01

为什么新安装的Eclipse不能打开-程序员宅基地

文章浏览阅读2k次。问题描述:同事遇到的问题,在公司的已有的公用的笔记本上安装jdk后,安装Eclipse,点击Eclipse启动程序,不能正常启动弹框提示:Failed to load the JNI shared library问题分析:1.查询此类问题是jdk的版本与Eclipse的版本不一致导致的2.检查java -version 运行 java -version ..._新安装eclplise 启动不了

ATMEGA48,设计一个电阻网络,用AD实现三个按键的输入判断功能_atmega48 adc-程序员宅基地

文章浏览阅读352次。#include<iom48v.h>unsigned int ad; //io初始化void io_init(void){ DDRB = 0B11111111; PORTB = 0B11111111;}//ADC初始化void adc_init(){ ADMUX = 0x46; //(0100 0110)基准源AVCC,AREF引脚外加滤波电容,右对齐,adc6 ADCSRA = 0xc3; //(1100 0011)使能,..._atmega48 adc

Device File Explorer打开啥都没有_androidstudiodevicefile空的-程序员宅基地

文章浏览阅读2.6k次。如下图:我创建了SQLite数据库,需要在AndroidStudio中AndroidDeviceMonitor打开,但是Device File Explorer打开后什么都没有(我在学习SQLite数据库,跟着老师敲,但是我的就是和老师不一样)在AndroidStudio中想查看自己所创建的数据库,打开Tools/打开后什么都没有,但是别人打开就有,凭什么自己打开就没有呢另..._androidstudiodevicefile空的

随便推点

[时间管理]TED-如何掌控你的时间_工作时间管理ted-程序员宅基地

文章浏览阅读3.1k次。写给很忙的人你忙个屁。忙都是借口,是说服自己拒绝某些事情的虚伪的借口。只是你觉得这件事情对你没有那么重要而已。来自TED的时间管理 http://open.163.com/movie/2016/12/I/B/MC82BCQAN_MC8U8L3IB.html核心思想:首先要想的不是节省时间,而应该是把时间用到最有用的事情上选出最有用的事情方法——假设自己穿越到一年/一月/一周/N天之后之后,假设_工作时间管理ted

解决windows使用pytesseract的几个BUG(tesseract.exe is not installed or it's not in your PATH)-程序员宅基地

文章浏览阅读757次,点赞2次,收藏3次。正常安装pytesseract时没有任何问题的,但是在真正使用的时候就会报错:pytesseract.pytesseract.TesseractNotFoundError: tesseract.exe is not installed or it's not in your PATHpytesseract未安装或者不在指定路径,百度了一大堆,说什么要添加路径:tesseract_cmd = r'C:\Program Files (x86)\Tesseract-OCR\tesseract.exe._tesseract.exe

常用的NSString和NSMutableString方法-程序员宅基地

文章浏览阅读1.2w次。NSString方法+(id) stringWithContentsOfFile:path encoding:enc error:err创建一个新字符串并将其设置为path指定的文件的内容,使用字符编码enc,如果非零,则返回err中错误+(id) stringWit_nsstring和nsmutablestring

向Hive表中导入数据_怎么在hive的内部表中补充内容-程序员宅基地

文章浏览阅读1k次。转载自 [email protected]的博客在Hive中建好表之后,需要将数据加载进来,以便做后续查询分析,本文介绍向Hive表中加载数据的几种方式。建表时候直接指定如果你的数据已经在HDFS上存在,已经为结构化数据,并且数据所在的HDFS路径不需要维护,那么可以直接在建表的时候使用location指定数据所在的HDFS路径即可。比如:CREATE [EXTERNAL] TABLE t_l..._怎么在hive的内部表中补充内容

oracle 删除大量数据后整理表(analyze table xxx compute statistics)_analyze table compute statistics-程序员宅基地

文章浏览阅读2w次,点赞5次,收藏34次。1. DELETE 后 TRUNCATE TABLE ;然后重新分析一下 analyze table tablename compute statistics查看表信息select NUM_ROWS,BLOCKS,AVG_SPACE,AVG_ROW_LEN from user_tables where table_name=table_name;2.Oracle 表删除大量数据后,_analyze table compute statistics

直流无刷驱动资料,STM32电机控制程序源码,FOC电机控制_m0 foc-程序员宅基地

文章浏览阅读1.5k次。STM32电机控制程序源码,STM32F103C8T6直流无刷驱动资料,STM32电机控制资料FOC01 STM32f103_BLDC霍尔控制02 STM32f103_BLDC无霍尔控制03 STM32f103_PMSM_FOC霍尔控制04 STM32f103_PMSM_FOC编码器控制05 STM32f103_PMSM_FOC无感控制id=651541838037&..._m0 foc