|
1 | 1 | # rollup-plugin-import-css
|
2 | 2 | A Rollup plugin to import CSS into JavaScript
|
| 3 | + |
| 4 | + |
| 5 | +[](https://github.com/jleeson/rollup-plugin-import-css/blob/master/LICENSE) |
| 6 | +[](https://discord.gg/AA7qukU) |
| 7 | +[](https://www.patreon.com/outwalkstudios) |
| 8 | + |
| 9 | +--- |
| 10 | + |
| 11 | +## Usage |
| 12 | + |
| 13 | +```js |
| 14 | +import css from "rollup-plugin-import-css"; |
| 15 | + |
| 16 | +export default { |
| 17 | + input: "index.js", |
| 18 | + output: { file: "dist/index.js", format: "esm" }, |
| 19 | + plugins: [ css() ] |
| 20 | +}; |
| 21 | +``` |
| 22 | + |
| 23 | +This will make all imported css files be bundled into a single css file as well as make css files accessible as a default export. |
| 24 | + |
| 25 | +This plugins supports two forms of importing css, when a css file is imported without an assigned variable, the css is bundled into a single css file. |
| 26 | +```js |
| 27 | +import "./styles.css"; |
| 28 | +import styles from "./styles.css"; |
| 29 | +``` |
| 30 | + |
| 31 | +--- |
| 32 | + |
| 33 | +## Options |
| 34 | + |
| 35 | +### include |
| 36 | + |
| 37 | +Type: `array` or `string` |
| 38 | +Default: `[]` |
| 39 | + |
| 40 | +A single file, or array of files to include when minifying. |
| 41 | + |
| 42 | +### exclude |
| 43 | + |
| 44 | +Type: `array` or `string` |
| 45 | +Default: `[]` |
| 46 | + |
| 47 | +A single file, or array of files to exclude when minifying. |
| 48 | + |
| 49 | +### output |
| 50 | + |
| 51 | +Type: `string` |
| 52 | +Default: `null` |
| 53 | + |
| 54 | +An output file for the css bundle. |
| 55 | + |
| 56 | +### transform |
| 57 | + |
| 58 | +Type: `Function` |
| 59 | +Default: `null` |
| 60 | + |
| 61 | +The transform functin is used for processing the CSS, it receives a string containing the code to process as an argument. The function should return a string. |
| 62 | + |
| 63 | +--- |
| 64 | + |
| 65 | +## Why |
| 66 | + |
| 67 | +With WebComponent frameworks, its useful to be able to import the css for a component. Other solutions for rollup either lack features or are large and bloated with extra features that some users may not need such as SASS or LESS support. This plugin is small and by default only supports plain css with the option to process it further. |
| 68 | + |
| 69 | +--- |
| 70 | + |
| 71 | +## Reporting Issues |
| 72 | + |
| 73 | +If you are having trouble getting something to work with this plugin, you can ask in our [discord](https://discord.gg/AA7qukU) or create a new [Issue](https://github.com/jleeson/rollup-plugin-import-css/issues). |
| 74 | + |
| 75 | +If you find a bug or if something is not working properly, you can report it by creating a new [Issue](https://github.com/jleeson/rollup-plugin-import-css/issues). |
| 76 | + |
| 77 | +If this plugin does not fit your needs or is missing a feature you would like to see, let us know! We would greatly appreciate your feedback on it. |
| 78 | + |
| 79 | +--- |
| 80 | + |
| 81 | +## License |
| 82 | + |
| 83 | +rollup-plugin-import-css is licensed under the terms of the [**MIT**](https://github.com/jleeson/rollup-plugin-import-css/blob/master/LICENSE) license. |
0 commit comments