How to Use PostCSS in a Nuxt 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 Nuxt project and install PostCSS Preset Env and Rucksack..
npx create-nuxt-app nuxt-demo
cd nuxt-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 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 variables and plugins in nuxt.config.js. Pass the options (opens new window) as well.
export default {
  css: ["@/assets/variables.css"],
  build: {
    postcss: {
      plugins: {
        "postcss-preset-env": {
          stage: 1,
          importFrom: "./assets/variables.css"
        },
        "rucksack-css": {}
      }
    }
  }
};
  1. Use PostCSS, e.g. in pages/postcss.vue.
<template>
  <div class="wrapper">
    <h1>PostCSS Demo</h1>

    <p>Articles about PostCSS:</p>

    <b-list-group>
      <b-list-group-item
        v-for="(item, index) in articles"
        :key="index"
        :href="item.url"
        target="_blank"
        class="a d-block d-md-flex align-items-center"
      >
        <b-img
          block
          fluid
          thumbnail
          :src="item.img"
          :alt="item.title"
          class="img mr-md-4"
        />

        <h2 class="h4 py-2">{{ item.title }}</h2>
      </b-list-group-item>
    </b-list-group>
  </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">
.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