PostCSS plugin to automatically import global dependencies.
That's quite useful when you need to preload variables in all css files.
Disclaimer
It's advised to use this plugin in combination with both postcss-import and postcss-custom-properties.
Example using Gulp
gulp.task('css', function() {
return gulp.src('./src/*.css')
.pipe(postcss([
require('postcss-prepend-imports')({
path: 'shared',
files: ['color.css']
}),
require('postcss-import')(),
require('postcss-custom-properties')()
]))
.pipe(gulp.dest('./build'));
});
Variables file example
/* ./shared/color.css */
:root {
--background-default: #ccc;
}
Input
/* ./src/main.css */
.main {
background: var(--background-default);
}
Output
/* ./build/main.css */
.main {
background: #ccc;
}
Above snippet is the output when we use postcss-prepend-imports together with postcss-import and postcss-custom-properties.
npm install postcss-prepend-imports --save-dev
var options = {
path: '__tests__/fixtures',
files: ['colors.css']
};
postcss([ require('postcss-prepend-imports')(options) ])
Type: string
(default: ''
)
Set the root folder where postcss-prepend-imports
plugin should find files to prepend.
Type: array
(default: []
)
List of file names to prepend in all css files using @import
.
See PostCSS docs for examples for your environment.