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

  1. 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
  1. 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);
  1. 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": {}
  }
};
  1. Register the variables in src/main.js.
import "./assets/variables.css";
  1. 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

# Usage

Last updated: 11/1/2020, 3:28:11 PM