1. rollup-plugin-postcss-config
Transform PostCSS in Rollup using options from a config file.
rollup-plugin-postcss-config
Package: rollup-plugin-postcss-config
Created by: Updater
Last modified: Mon, 16 May 2022 04:33:31 GMT
Version: 2.0.0
License: MIT
Downloads: 374
Repository: https://github.com/Updater/rollup-plugin-postcss-config

Install

npm install rollup-plugin-postcss-config
yarn add rollup-plugin-postcss-config

rollup-plugin-postcss-config

Build Status npm semantic-release

Transform PostCSS in Rollup using options from a config file.

Install

 npm install -D rollup-plugin-postcss-config

Usage

Configuration

Define PostCSS transform options, like plugins, in postcss.config.js.

 module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {},
    'postcss-reporter': {},
  },
};

See postcss-load-config for more options.

Rollup

This plugin makes no assumptions about what to do with the transformed CSS. Another plugin has to follow to consume its output.

In the following example rollup.config.js, the transformed CSS is converted to a string using rollup-plugin-string:

 import postcss from 'rollup-plugin-postcss-config';
import string from 'rollup-plugin-string';

export default {
  plugins: [
    postcss({
      // Default value, can be omitted.
      include: '*.css', 
      // Undefined by default.
      exclude: 'node_modules/**',
    }),
    string({
      include: '*.css',
      exclude: 'node_modules/**',
    }),
  ],
};

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