1. rollup-plugin-css-only
Rollup plugin that bundles imported css
rollup-plugin-css-only
Package: rollup-plugin-css-only
Created by: thgh
Last modified: Mon, 06 Nov 2023 20:05:35 GMT
Version: 4.5.2
License: MIT
Downloads: 152,498
Repository: https://github.com/thgh/rollup-plugin-css-only

Install

npm install rollup-plugin-css-only
yarn add rollup-plugin-css-only

Rollup plugin that bundles imported css

Software License Issues JavaScript Style Guide NPM Latest Version

Features

  • CSS is emitted as 1 asset
  • Order of imports is guaranteed
  • Watches CSS imports
  • Typescript types

Installation

# v4 is compatible with Rollup 4 & 3 & 2
# Rollup 4 since v4.4
npm install --save-dev rollup-plugin-css-only

Usage

 // rollup.config.js
import css from 'rollup-plugin-css-only'

export default {
  input: 'input.js',
  output: {
    file: 'output.js',
    format: 'es',
    assetFileNames: 'assets/[name]-[hash][extname]'
  },
  plugins: [css()]
}
 // entry.js
import './reset.css'
import './layout.css'
 /* layout.css */
@import './nested.css';
@import './more.css';

Options

There is 1 option: output.
By default the plugin will use output.assetFileNames to decide the filename.

 css({
  // Optional: filename to write all styles to
  output: 'bundle.css'
})

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Contributions and feedback are very welcome.

To get it running:

  1. Clone the project.
  2. npm install
  3. npm run build

Credits

License

The MIT License (MIT). Please see License File for more information.

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