rollup-plugin-less-vars-to-css-vars
v1.1.1
Published
Less-to-CSS Variable Aggregator is an intelligent plugin designed to automate the process of converting variables from Less to CSS. It scans your project for all declared variables in Less files and transforms them into readable CSS variables. This plugin
Downloads
17
Maintainers
Readme
rollup-plugin-less-vars-to-css-vars
Less-to-CSS Variable Aggregator is an intelligent plugin designed to automate the process of converting variables from Less to CSS. It scans your project for all declared variables in Less files and transforms them into readable CSS variables. This plugin not only simplifies style management but also ensures more efficient use of variables, reducing development time and improving overall code structure.
Requirements
This plugin requires an LTS Node version (v14.0.0+) and Rollup v1.20.0+.
Install
npm install rollup-plugin-less-vars-to-css-vars --save-dev
Usage
Create a rollup.config.js
configuration file and import the plugin:
import { exportLessVars } from "rollup-plugin-less-vars-to-css-vars";
const config = {
input: "src/index.js",
output: {
dir: "output",
format: "es",
},
plugins: [exportLessVars({ output: "theme.css" })],
};
export default config;
Then call rollup
either via the CLI or the API.
Options
exclude
Type: Array[...String|RegExp]
A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore.
output
Type: String
Default: variables.css
CSS filename
Example
import { exportLessVars } from "rollup-plugin-less-vars-to-css-vars";
const config = {
input: "src/index.js",
output: {
dir: "output",
format: "es",
},
plugins: [exportLessVars({ output: "theme.css" })],
};
export default config;
@primary-color: #0000ff;
@text-color: #594c4a;
body {
color: @text-color;
}
/* theme.css */
:root {
--primary-color: #0000ff;
--text-color: #594c4a;
}