Is there an addon to LESSC that would allow me to to do something like:
LESS
.icon-xyz{ .sprite('image1.png'); }
.icon-abc{ .sprite('image2.png'); }
that outputs a merged sprite in production mode, and stays with the individual images in development mode?
Similar to how Compass works with SASS
There is some addon for node.js: less-sprites. https://github.com/polycode/less-sprites
It requires install ImageMagick firstly.
Related
Environment
Laravel Mix Version: laravel-mix#2.1.0
Node Version: v8.2.1
NPM Version: 6.10.0
OS: Linux (Ubuntu 18.04)
Description:
I'm trying to identify which CSS process is the culprit of some wrong CSS being applied with npm run production but I'm not being able to do it. Some Bootstrap 4 CSS properties are being translated/simplified and it's producing wrong styles. I tried a lot of solutions (in my local webpack.mix.js => mix.options). I've tried to disable purifyCss (I discovered it's not using it), uglify, force outputStyle to 'expanded' (in .sass() method), etc. None of them worked.
As a workaround, I could add a new "prod" ENV and perform minification and other things directly from my webpack.mix.js, but I don't like this solution, specially when I think it's just because of a setting/flag somewhere I could easily change (if I knew which one).
Thank you.
Steps To Reproduce:
npm run dev: background-position: center right calc(0.375em + 0.1875rem)
npm run production: background-position: 100% calc(.375em + .1875rem)
Well, it looks like it was a bug in a mixin:
https://github.com/twbs/bootstrap/commit/de1a6e3201a2f047c5abd2430795be32d37e9a35#diff-4fcf7dc3cf66b28cb08274cc30798d70
https://github.com/cssnano/cssnano/issues/712
Updating to latest Bootstrap version solves the issue.
Im trying to build a (the thesis-example.tex) PDF with the cleanthesis theme (http://cleanthesis.der-ric.de/) and it wont work
The last failure is:
! pdfTeX error (font expansion): auto expansion is only possible with scalable
fonts.
\AtBegShi#Output ...ipout \box \AtBeginShipoutBox
\fi \fi
l.107 \cleardoublepage
! ==> Fatal error occurred, no output PDF file produced!
Transcript written on thesis-example.log.
Im currently on a Fed26 System with 5928 installed texlive packages.
(dnf install texlive-scheme-full, dnf install texlive-*)
If i try this with a complete stock Ubuntu 16.04 and texlive-publisher and texlive-full packages it works. So i guess there is no missing package.
I you need specific parts of thesis-example.log, let me know i cant paste it because its too large
So i installed a clean Fed26 and loaded all texlive packages i had on the main pc. I compared /etc/texlive/web2c/updmap.cfg and i saw that my updmap.cfg was currupted.
I copied the working updmap.cfg to my main system and did a "updmap-sys --force" and now it works
is it possible to set the orientation a .mp4 file in the video.js player? I don't see properties to do so such as Orientation="Portrait", but I was wondering if setting the width and height at runtime would do this.
You should try out this plugin.
Video.js Zoom Rotate
A videoJS plugin to easily rotate or zoom in a video
https://github.com/xbgmsharp/videojs-rotatezoom
Joe DF answer is the solution. However I struggled to get it working properly and so I decided to share the step by step of what worked for me.
OK, first I tried like hell to get the videojs.zoomrotate.js plugin working without using 'bower' but unfortunately there is no way of doing it so you will HAVE to use it. In my case I use Visual Studio and Visual Source Safe so npm, git, etc, are useless in my setup and that's why I didn't want to install such stuff. The good news is that you can uninstall everything after to get VideoJS and the rotate plugin working. Finally it's important to let you know that I did it from Windows 10.
Let's see how to do this:
Download and install 'Git'.
Download and install 'npm'.
Open the command prompt (cmd) and install 'bower' typing:
npm install -g bower
Tip: If you got any error, just close your command prompt and open it again.
No worries, as I said you can uninstall everything later if you don't want to keep it.
Now we will install VideoJS. I already had it in my project but I choose to make everything from scratch to ensure it would work no problem. At this point I recommend you to CLOSE your command prompt and open it again to avoid get errors from npm.
Open command prompt and install VideoJS. Type:
npm install --save video.js
At last install videojs.zoomrotate.js. Type:
bower i --save videojs-rotatezoom
Now close your command prompt, open Windows Explorer. Navigate to c:\users\your_user_name\
You will see a new folder that was created by bower named bower_components. Enter it. You will find two subfolders in it, one for VideoJS and another for the plugin.
Enter video.js folder and then dist folder. You want only two files from there: 'video.js' and 'video-js.css'. Copy both to the folder in your application where you put your scripts.
Return to the bower_components folder and enter videojs-rotatezoom folder. Now enter the src folder. Copy the file 'videojs.zoomrotate.js' to your application scripts folder. Now you have everything you want.
You can uninstall npm and git and delete all left overs from the c:\users\your_user_name if you want, because you don't need it anymore.
Now it's time to put the videojs into your html file. Copy and paste this:
<link href="/your_script_folder/video-js.css" rel="stylesheet" />
<script src='/your_script_folder/video.js'></script>
<script src='/your_script_folder/videojs.zoomrotate.js'></script>
<div id="divVideo" class="video">
<video id="my-video" class="video-js" controls="" preload="auto" style="width:800px;height:600px;" >
<source src="yourvideo.mp4" type='video/mp4' controls='false' />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
<script>
var my_video_id = videojs('my-video');
my_video_id.zoomrotate({
rotate: 90,
zoom: 1.5
});
</script>
</div>
That's it! If you follow the steps correctly you should have it working by now. Just set the rotate and zoom attributes as you need.
Enjoy!
The best to fix this it to rotate the actual video file. You can do this by using VLC Player.
Go to Tools > Effects and Filters.
Click on Video Effects->Geometry.
Enable Transform and select Rotate by 90 degrees from the dropdown.
Other video libraries should rotate it too. (e.g. Windows Movie Maker)
the other option is to add this to your css
video{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
Note that this will transform your controls also however
I use dotless 1.3.1.0 compiling less-files. This worked fine with bootstrap 2.x, but after switching to bootstrap 3.0.0 (downloaded the source from here: http://getbootstrap.com/getting-started/), I suddenly get this error:
Expected ')' but found ' ' on line 47 in file 'mixins.less': [46]: //
Sizing shortcuts [47]: .size(#width; #height) {
------------^ [48]: width: #width;
Seems that having a ; as seperator between parameters is not valid less. The original source in the mixins.less looks like this:
...
// Sizing shortcuts
.size(#width; #height) {
width: #width;
height: #height;
}
...
Do I have to use an updated less compiler? Or did bootstrap release buggy less source?
UPDATE 1: I can see, that a pull request for dotless exists, fixing the problem with ;
https://github.com/dotless/dotless/pulls
"Fixes for ; not supported in mixin parameter lists #319 #320"
I will go using the css files until this has been fixed in dotless.
If you check out bootstrap's getting started page, you'll find that they state:
LESS compilation
If you download the original files, you need to compile Bootstrap's
LESS files into usable CSS. To do that, Bootstrap only officially
supports Recess, Twitter's CSS hinter built on top of less.js.
Though not using dotless, I followed a similar path that you did using lessc, and then found that using recess resolved my issue. Perhaps using recess would be an option for you too?
As an example, I have a file called tmpfl.less with the following contents:
#import "mixins.less";
#import "variables.less";
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
If I run lessc on it, I get the following result:
lessc tmpfl.less
NameError: .size is undefined in mixins.less:47:0
46 // Sizing shortcuts
47 .size(#width; #height) {
48 width: #width;
Now, I successfully use recess as follows:
recess --compile tmpfl.less > tmpfl.css
Update:
In order to utilize Recess in a .Net environment, specifically in Visual Studio, one can follow these instructions for details on installing. Those instructions provide an overview, but perhaps leave out some details on getting Node.js installed. Microsoft has some brief words about it and they link to a GitHub project which might be helpful depending on your version of Visual Studio.
If you don't go down the Node.js-in-Visual Studio route, then really the main goal is to have Node.js installed somewhere, and then ultimately npm, the package manager for Node.js so you can install Recess. That can be achieved on Windows by going to the Node.js download, and installing the Windows version. Installing npm is highlighted in this stackoverflow discussion. Once installed, you just need to run npm to install Recess as follows:
npm install recess -g
That is also discussed in the first link of this update.
One of my colleagues that uses dotless has had a few fixes for Bootstrap 3 issues merged. Apparently Bootstrap3 will now compile with the latest code :)
https://github.com/dotless/dotless/commits/master
I expect an updated NuGet package will be available soon (based on this tweet)
After spending hours on getting this to work myself i found that dotless is quite useless at this time.
but here is where you can impliment Less and Bootstrap 3 Less in your mvc ASP.Net Project
http://www.tomdupont.net/2013/10/bootstrap-3-less-bundling-and-aspnet-mvc.html?showComment=1386250367416#c1439130135847828203
This guy just won an internets in my book and if you can track down his stack exchange account for me let me know.
I have put together an httphandler which will compile less using lessjs.
It's more of a proof of concept than production quality code, however it may be useful for some people as a starting point.
You can find the source here:
https://bitbucket.org/martinbooth/clearscriptless
In case anyone is interested in trying to do this using jurassic, you can find my attempt here:
https://bitbucket.org/martinbooth/jurassicless
I don't recommend Jurassic for this because
it required a few bug fixes to the library which are not currently
integrated into the main project My changes are now in the master branch of Jurassic so this is no longer an issue (though the latest release does not currently include them)
it is very slow, hence the
reason I tried clearscript
I've downloaded the executable and created a simlink to /usr/local/bin.
I'm under Mac OSX 10.7
When I then try to run a script that requires some module i.e.
var page = require('webpage').create();
I got an error
undefined:0 ReferenceError: Can't find variable: require
as if 'require' is not seen as a reserved word but interpreted as a variable symbol.
(As an aside, whenever I lunch phantomjs a Sencha Touch icon appears in my Dock)
Your copy of PhantomJS is from an older version. Always get the latest one from http://phantomjs.org.
I had this issue too, and the problem was my version of mocha -- going back to 1.9.0 fixed it.
SenchaTouch 2.0 installs PhantomJS 1.1 somewhere depending on the OS. Under *NIX check where with 'which phantomjs'.
Just modify your bash or whatever configuration file accordingly to remove the Phantomjs included with SenshaTouch from your PATH.