Comments (8)
I'm not sure that it is the right way of usage.
Why are you not using gulp-sass?
from gulp-cssimport.
The recommendation came from Shopify's example repo at https://github.com/Shopify/shopify-css-import to use gulp-cssimport
. I am guessing they don't use gulp-sass
because the files need to actually be liquid
as the last file extension. When I try to use gulp-sass
I get an error saying the source file is invalid.
from gulp-cssimport.
Maybe directory option can help, it will act as current working directory.
gulp.task("styles", function(){
return gulp.src([sourceFilename])
.pipe(cssimport(directory: bourbonPaths[0]))
.pipe(gulp.dest(destinationFolder));
})
Note: directory
is string, so you can specify only 1 path.
Not tested this.
from gulp-cssimport.
Ohh that is close! But it looks like the directory
option is not respected or something:
This line has the path logged out:
[14:27:23] WARDTEST: /Users/wardpenney/test-app/node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets
[14:27:23] WARDTEST: /Users/wardpenney/test-app/node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets
Trace: { [Error: ENOENT, open '/Users/wardpenney/test-app/scss/bourbon']
errno: 34,
code: 'ENOENT',
path: '/Users/wardpenney/test-app/scss/bourbon' }
at onResolvePath (/Users/wardpenney/test-app/node_modules/gulp-cssimport/gulp-cssimport.js:85:13)
at /Users/wardpenney/test-app/node_modules/gulp-cssimport/helper.js:94:3
at fs.js:207:20
at Object.oncomplete (fs.js:107:15)
/Users/wardpenney/workspace/test-app/node_modules/gulp-cssimport/gulp-cssimport.js:86
throw err;
^
Error: ENOENT, open '/Users/wardpenney/test-app/scss/bourbon'
from gulp-cssimport.
You are right, directory is ignored if object is vinyl file.
from gulp-cssimport.
gulp-cssimport can work with plain string/buffer streams.
var through2 = require("through2");
var VinylFile = require('vinyl');
var Chunk = require("gulp-cssimport/chunk");
var stream = gulp.src("design/style.css")
.pipe(through2.obj(function (chunk, enc, callback) {
var ch = Chunk.create({
contents: chunk.contents.toString(),
directory: chunk.base
});
callback(null, ch);
}))
.pipe(cssimport({directory: "design" }))
.pipe(through2.obj(function (data, enc, callback) {
var file = new VinylFile({
path: 'x', // <--- we lost path here.
contents: new Buffer(data)
});
callback(null, file);
}))
.pipe(gulp.dest("/dev/null"));
It works for me, but there is a problem - we lost file name. Need to solve this somehow.
from gulp-cssimport.
What if we just use a variable to hold the filename?
var gulp = require("gulp"),
cssimport = require("gulp-cssimport"),
through2 = require("through2"),
VinylFile = require('vinyl'),
neatPaths = require("node-neat").includePaths,
bourbonPaths = require("node-bourbon").includePaths,
sourceFilename = "scss/styles.scss.liquid",
destinationFolder = "assets/",
Chunk = require("gulp-cssimport/chunk");
gulp.task("styles", function(){
return gulp.src([sourceFilename])
.pipe(through2.obj(function (chunk, enc, callback) {
var ch = Chunk.create({
contents: chunk.contents.toString(),
directory: chunk.base
});
callback(null, ch);
}))
.pipe(cssimport({directory: bourbonPaths[0]}))
.pipe(through2.obj(function (data, enc, callback) {
var file = new VinylFile({
path: sourceFilename, // <- Can we just use a filename variable?
contents: new Buffer(data)
});
callback(null, file);
}))
.pipe(gulp.dest(destinationFolder));
})
gulp.task("watch", function () {
gulp.watch("scss/**/*.*", ["styles"]);
});
gulp.task("default", ["watch"]);
Thanks for all your help, btw
from gulp-cssimport.
If you are building 1:1from single source file then yes it is a solution.
But I will think how to improve this stuff.
from gulp-cssimport.
Related Issues (20)
- not parsing files with ../ HOT 12
- When files are included from sub-directory the destination file winds up in the wrong place HOT 5
- Corrupted Package in 2.1.0 on npm? HOT 10
- File masks like **/* cause wrong path resolving HOT 2
- Plugin remove sourcemaps from end file. HOT 8
- Source-map is broken HOT 4
- outdated minimatch dep HOT 1
- Commented @import statements are not ignored HOT 1
- gulp-cssimport improvements
- Can it work with absolute path ? HOT 5
- when i use cssimport throw UnhandledPromiseRejectionWarning and DeprecationWarning HOT 1
- css @import inside imported file HOT 1
- Add 'root' option and 'urlTransform' option HOT 3
- Imported CSS files contain byte order mark HOT 3
- gulp-cssimport and gulp-sass how to? HOT 1
- Replace deprecated gulp-util HOT 1
- gulp-util removal request HOT 1
- Process minified files HOT 2
- is it rebase images url ? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gulp-cssimport.