Materiais de referência: 13 minutos para dominar PostCSS_哔哩哔哩_bilibili (Fenghua front-end)
Uso básico do postcss
postcss é uma plataforma para processar arquivos relacionados a css. Plug-ins podem ser usados para completar prefixos de navegador, usar novos recursos para converter métodos de escrita antigos, converter automaticamente px em rem, verificar regras gramaticais de css e assim por diante.
construir projeto
Crie uma nova pasta test-postcss
Abra com vscode, inicialize o projeto no comando
yarn init -y
Crie um novo index.html, incluindo
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="./style.css" />
<title>test-postcss</title>
</head>
<body>
<main>
<div class="boxs">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</main>
</body>
Crie um novo style.css com o conteúdo
main {
margin-bottom: 24px;
letter-spacing: 1px;
font-size: 24px;
height: 100vh;
background-color: black;
}
.boxs {
padding-bottom: 18px;
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 100%;
align-content: space-around;
}
.box {
width: 100px;
height: 100px;
background: linear-gradient(45deg, blue, orange);
}
usar postcss
Instalar
yarn add postcss postcss-cli -D
correr
npx postcss style.css -o dist.css
Neste momento, você pode ver dist.css no diretório raiz, o conteúdo é o mesmo que style.css, porque nenhum plug-in foi configurado ainda.
Altere o endereço de referência no navegador para dist.css
<link rel="stylesheet" href="./dist.css" />
Use o plug-in de prefixo automático
Instalar
yarn add autoprefixer -D
Execute o comando, use este plugin com parâmetros
npx postcss style.css -o dist.css -u autoprefixer
Neste ponto, o código empacotado permanece inalterado e você pode npx autoprefixer --infovisualizar as propriedades prefixadas com .
Modifique a lista de navegadores compatíveis para torná-la compatível com versões anteriores ao Chrome 69 e adicione-a a package.json
"browserslist": [
"cover 99%",
"Chrome >= 69"
],
Execute o comando (igual ao anterior), você pode ver que alguns atributos e valores no dist.css gerado são prefixados com o navegador
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around;
……
background: -webkit-linear-gradient(45deg, blue, orange);
background: -moz-linear-gradient(45deg, blue, orange);
background: -o-linear-gradient(45deg, blue, orange);
background: linear-gradient(45deg, blue, orange);
É inconveniente ter parâmetros na linha de comando, mas arquivos de configuração podem ser usados. Crie um novo postcss.config.js no diretório raiz, o conteúdo é
module.exports = {
plugins: [
require("autoprefixer")
]
}
Execute a diretiva sem argumentos após remover dist.css
npx postcss style.css -o dist.css
A configuração é considerada eficaz.
Use postcss-preset-env
Esta função de plug-in abrange o autoprefixador e também tem a capacidade de converter css de versão alta para versão baixa, ou seja, babel no mundo css.
Instalar
yarn add postcss-preset-env -D
Para testar o babel, você precisa aumentar o atributo stage do css e usar um teste de atributo relativamente novo, como & selector
Modifique postcss.config.js e adicione a seguinte configuração
const postcssPresetEnv = require('postcss-preset-env')
module.exports = {
plugins: [
postcssPresetEnv({
stage: 0
}),
]
}
Em seguida, use seletores & aninhados em css e use a propriedade padding-inline mais recente
.boxs {
padding-inline: 12px;
}
.box {
&:hover {
background: linear-gradient(45deg, orange, blue);
}
}
Execute o comando para compilar css e descubra que o conteúdo no css de saída &foi aumentado e padding-inlinetambém se tornou padding-lefte padding-right. Os blocos de cores no navegador também mudam quando o mouse passa sobre eles.
usar stylelint
stylelint pode verificar se o método de escrita CSS é padronizado
Instalar
yarn add stylelint stylelint-config-standard -D
Crie um novo arquivo .stylelintrc.json no diretório raiz, o conteúdo é
{
"extends":"stylelint-config-standard"
}
Configurar em postcss.config.js
plugins: [
require("stylelint")
]
Em seguida, execute a compilação e descubra que o console exibe um aviso amarelo, cujo conteúdo é que o método de escrita CSS não está em conformidade com a especificação. Se você não vir um aviso pop-up, tente alterar um determinado nome ou valor de atributo para uma redação incorreta e, em seguida, compile e o aviso será exibido.
Usar postcss-pxtorem
Pode converter automaticamente a unidade px em rem ao embalar
Instalar
yarn add postcss-pxtorem -D
Configurado em postcss.config.js, onde propList é '*' é para converter todos os atributos, e o padrão é apenas alguns atributos como tamanho da fonte e espaçamento entre palavras.
plugins: [
require("postcss-pxtorem")({
propList: ['*'],
})
]
Execute o comando de compilação e descubra que o px no css de saída se tornou rem.
comando abreviado
É inconveniente executar uma longa lista de instruções, que podem ser adicionadas aos scripts em package.json
"scripts": {
"build":"postcss style.css -o dist.css"
}
yarn buildAgora execute -o diretamente na linha de comando
Usado em CRA
Envie o código primeiro e depois exponha os itens de configuração
yarn eject
Encontre postcss em webpack.config.js em config e altere o estágio em postcss-preset-env para 0. Observe que há dois lugares, que devem julgar se usar Tailwind.
Em seguida, instale manualmente as dependências relacionadas ao postcss para a versão mais recente em package.json. Reinicie o projeto e descubra que o novo texto CSS foi convertido.
Pesquise por ident: 'postcss' e adicione o módulo pxtorem no final da matriz de plugins no mesmo nível. Claro, você deve instalar manualmente as dependências primeiro.
require('postcss-pxtorem')({
propWhiteList: ['*'],
})
Reinicie o projeto, px se tornou rem.