Manifest.json can't deal with filename start with underscore
66beta opened this issue · 2 comments
Excuse for my poor english. Good job! Thank you, Austin.
this wont work
"slick.css": {
"files": [
"../bower_components/slick.js/slick/_slick.scss",
"../bower_components/slick.js/slick/_slick-theme.scss"
]
}
this works
"slick.css": {
"files": [
"../bower_components/slick.js/slick/slick.scss",
"../bower_components/slick.js/slick/slick-theme.scss"
]
}
So, when I want to build a alternative bootstrap.css, this wont work
"bootstrap.css": {
"vendor": ["../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss"]
}
My bower.json
{
"name": "sage",
"homepage": "https://roots.io/sage/",
"authors": [
"Ben Word <ben@benword.com>"
],
"license": "MIT",
"private": true,
"dependencies": {
"modernizr": "2.8.2",
"jquery": "1.11.2",
"bootstrap-sass-official": "~3.3.3",
"jquery-waypoints": "~3.1.1",
"slick.js": "~1.4.1"
},
"overrides": {
"slick.js": {
"main": [
"./slick/slick.js"
]
},
"bootstrap-sass-official": {
"main": [
"./assets/javascripts/bootstrap/transition.js",
"./assets/javascripts/bootstrap/alert.js",
"./assets/javascripts/bootstrap/button.js",
"./assets/javascripts/bootstrap/carousel.js",
"./assets/javascripts/bootstrap/collapse.js",
"./assets/javascripts/bootstrap/dropdown.js",
"./assets/javascripts/bootstrap/modal.js",
"./assets/javascripts/bootstrap/tooltip.js",
"./assets/javascripts/bootstrap/popover.js",
"./assets/javascripts/bootstrap/scrollspy.js",
"./assets/javascripts/bootstrap/tab.js",
"./assets/javascripts/bootstrap/affix.js",
"./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
"./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
"./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
"./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
"./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
]
}
}
}
My manifest.json
{
"dependencies": {
"main.js": {
"files": ["scripts/main.js"],
"main": true
},
"main.css": {
"files": ["styles/main.scss"],
"main": true
},
"slick.css": {
"files": [
"../bower_components/slick.js/slick/slick.scss",
"../bower_components/slick.js/slick/slick-theme.scss"
]
},
"bootstrap.css": {
"files": ["../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss"]
},
"jquery.js": {
"bower": ["jquery"]
},
"modernizr.js": {
"bower": ["modernizr"]
},
"jquery-waypoints.js": {
"bower": ["jquery-waypoints"]
},
"bootstrap.js": {
"bower": ["bootstrap-sass-official"]
},
"slick.js": {
"bower": ["slick.js"]
}
},
"config": {
"devUrl": "http://wp.dev"
}
}
I was out of town last week, I apologize for the slow response. Let me look into this.
I was having this same issue, its not assets-builder that is the issue, its the set up of slick.js:
I did find a bug with slick.js thought, the gif would not save to images,fonts worked just fine.
This is the work around:
The bower.json stayed default
"dependencies": {
"modernizr": "2.8.2",
"jquery": "1.11.2",
"bootstrap-sass-official": "3.3.4",
"slick.js": "~1.5.5"
},
manifest.json added this
"slick-theme.css": {
"files": [
"../bower_components/slick.js/slick/slick-theme.scss"
]
},
"images": {
"files": [ "../bower_components/slick.js/slick/ajax-loader.gif"]
},
What was wrong
In slick-theme.scsss, there is a couple functions that look for custom routes for the fonts and the images.
Since this is scss and it is precompiled, it cant and wont change unless its recompiled.
$slick-font-path: "./fonts/" !default;
$slick-loader-path: "./" !default;
@function slick-image-url($url) {
@if function-exists(image-url) {
@return image-url($url);
}
@else {
@return url($slick-loader-path + $url);
}
}
@function slick-font-url($url) {
@if function-exists(font-url) {
@return font-url($url);
}
@else {
@return url($slick-font-path + $url);
}
}
#So I added this slick-theme.scss that is now under styles in assets to the main.scss, also created a _homepage.scss
@import "layouts/_homepage";
@import "slick-theme";
@import "layouts/_homepage";
@import "slick-theme";
#In the _homepage.scss I added this to fix the function above in slick-theme.scss
$slick-font-path: '../fonts/';
@function font-url($url) {
@return url($slick-font-path + $url);
}
$slick-image-url: '../images/';
@function image-url($url) {
@return url($slick-image-url + $url);
}
$slick-font-path: '../fonts/';
@function font-url($url) {
@return url($slick-font-path + $url);
}
$slick-image-url: '../images/';
@function image-url($url) {
@return url($slick-image-url + $url);
}
That worked, and works. It looks like we have to figure this out as all packages are not created equal.
That being said, the .gif detection is an issue.