1. @snowpack/plugin-postcss
Run [PostCSS](https://github.com/postcss/postcss) on all `.css` files, including ones generated from Sass, Vue, and Svelte.
@snowpack/plugin-postcss
Package: @snowpack/plugin-postcss
Created by: snowpackjs
Last modified: Thu, 07 Apr 2022 00:53:49 GMT
Version: 1.4.3
License: MIT
Downloads: 3,359
Repository: https://github.com/snowpackjs/snowpack

Install

npm install @snowpack/plugin-postcss
yarn add @snowpack/plugin-postcss

@snowpack/plugin-postcss

Run PostCSS on all .css files, including ones generated from Sass, Vue, and Svelte.

Usage

From a terminal, run the following:

npm install --save-dev @snowpack/plugin-postcss postcss

Then add this plugin to your Snowpack config:

 // snowpack.config.mjs
export default {
  plugins: ['@snowpack/plugin-postcss'],
};

Lastly, add a postcss.config.js file to the root of your project as you would normally:

 const cssnano = require('cssnano');
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [cssnano(), postcssPresetEnv()],
};

Plugin Options

Name Type Description
input string[] File extensions to transform (default: ['.css'])
config string | object (optional) Pass in a PostCSS config object or path to your PostCSS config on disk

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin