How to Use PostCSS in a Vue Project demo repo
PostCSS (opens new window) is a tool for transforming styles with JS plugins.
Plugins (opens new window) used in this tutorial:
# 👣 Steps
- Create a Vue project and install PostCSS Preset Env and Rucksack.
npm i -g @vue/cli
vue create vue-demo
cd vue-demo
npm i postcss-preset-env rucksack-css
- I want to use custom properties (opens new window) and custom media queries (opens new window) so I will create a .css file to store the variables, e.g. in
src/assets/variables.css
.
:root {
/* Under the sea pantone color */
--sea-pink: #de98ab;
--limpet-shell: #98ddde;
--living-coral: #f36e60;
--vibrant-yellow: #ffdb3b;
--turkish-sea: #185190;
--viridian-green: #359499;
--turtle-green: #81894e;
--blue-depths: #273055;
}
/* Breakpoints */
@custom-media --sm (width >= 576px);
@custom-media --md (width >= 786px);
@custom-media --lg (width >= 992px);
@custom-media --xl (width >= 1200px);
- Register the plugins and pass the options (opens new window) in
postcss.config.js
.
module.exports = {
plugins: {
"postcss-preset-env": {
stage: 1,
importFrom: "./src/assets/variables.css"
},
"rucksack-css": {}
}
};
- Register the variables in
src/main.js
.
import "./assets/variables.css";
- Use PostCSS, e.g. in
src/views/postcss.vue
.
<template>
<div class="wrapper">
<h1>PostCSS Demo</h1>
<p>Articles about PostCSS:</p>
<ul class="list-group">
<li
v-for="(item, index) in articles"
:key="index"
class="list-group-item"
>
<a
:href="item.url"
target="_blank"
class="d-block d-md-flex align-items-center"
>
<img
:src="item.img"
:alt="item.title"
class="d-block img-thumbnail mr-md-4"
/>
<h2 class="h4 py-2">{{ item.title }}</h2>
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
articles: [
{
title:
"Some things you may think about PostCSS... and you might be wrong",
url:
"http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong/",
img: "https://placeimg.com/900/300/tech"
},
{
title:
"It's Time for Everyone to Learn About PostCSS What It Really Is; What It Really Does",
url:
"https://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/",
img: "https://placeimg.com/900/300/tech/grayscale"
},
{
title: "PostCSS Deep Dive",
url:
"https://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889",
img: "https://placeimg.com/900/300/tech/sepia"
}
]
};
}
};
</script>
<style lang="postcss" scoped>
.wrapper {
font-family: system-ui;
font-size: responsive;
transition: all 250ms ease-in-cubic;
}
a {
color: var(--turkish-sea);
padding: 0.75rem 1.25rem;
@media (--sm) {
color: var(--viridian-green);
}
@media (--md) {
color: var(--turtle-green);
}
@media (--xl) {
color: var(--living-coral);
}
&:hover {
background-color: #f6f7fb;
}
}
img {
@media (min-width: 768px) {
max-width: 225px;
}
}
</style>
# 📖 Explanation
# Settings
- I use
stage
(opens new window) 1 because I want to use a couple features that are still at stage 1. The default is stage 2. Instead of using lower stage, you can also add thefeatures
(opens new window) you want to use. - Features page (opens new window) show the stage of each feature.
# Usage
- Rucksack features used by
.wrapper
: font-family: system-ui;
is from the postcss-preset-env's system-ui font family (opens new window) feature.& li
,& a
, and&:hover
use the nesting rules (opens new window).
← Ionicons Vue Lazyload →