jonathantnealPartial Import 
Partial Import lets you use sugary @import statements in CSS, including glob-like and Sass-like behavior. It even lets you generates imports as a scaffolding tool.
/* before: style.css */
@import "foo/bar";
/* before: foo/bar.css */
.example-1 {
background-color: #fafafa;
}
/* after: style.css */
.example-1 {
background-color: #fafafa;
}Options
root
Type: String
Default: from or process.cwd()
The root where paths are resolved. This should be the directory containing node_modules.
path
Type: String | Array
Default: []
A path or paths used to locate files.
plugins
Type: Array
Default: undefined
An array of plugins to be applied to imported file.
onImport
Type: Function
Default: null
The function called after the import process, receiving an array of imported files.
resolve
Type: Function
Default: null
A custom resolver, receiving the id, basedir, and importOptions of an import.
load
Type: Function
Default: null
A custom loader, receiving the filename, importOptions, and content or
promised content.
skipDuplicates
Type: Boolean
Default: true
Whether similar files (based on the same content) will be skipped.
prefix
Type: String
Default: ""
Leading characters conditionally prepended to imports which are not found without them. For Sass-like, use "_".
glob
Type: Boolean | Object
Default: true
Whether glob-like behavior should be supported by imports. An object passed here will be forwarded to glob in order to change pattern matching behavior.
touch
Type: Boolean
Default: false
Whether imports should be created as files if they do not already exist.
extension
Type: String
Default: .css
A file extension conditionally appended to touched imports which do not specify an extension.
Usage
Add Partial Import to your build tool:
npm install postcss-partial-import --save-devNode
require('postcss-partial-import').process(YOUR_CSS, { /* options */ });PostCSS
Add PostCSS to your build tool:
npm install postcss --save-devLoad Partial Import as a PostCSS plugin:
postcss([
require('postcss-partial-import')({ /* options */ })
]).process(YOUR_CSS, /* options */);Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-devEnable Partial Import within your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require('postcss-partial-import')({ /* options */ })
])
).pipe(
gulp.dest('.')
);
});Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-devEnable Partial Import within your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('postcss-partial-import')({ /* options */ })
]
},
dist: {
src: '*.css'
}
}
});