I compile .less files into minified .css files using gulp. There are some variables defined in the less files like this:
#error-red: #cc0000;
I want to compile PHP placeholders into the minified css files, so the variables can be filled in later by a script. Something like this:
#error-red: <?php echo $error_red; ?>;
Or even:
#error-red: php_errorred_placeholder;
But the compilation fails because this is not valid CSS. Is there some other way to do this? The changes won't necessarily all be colors, but could also be borders or other rules.
I want to do this with PHP because node.js does not run on my production server.
Related
I use lessc 2.7.3. I generate css files via a makefile and use following paths
the makefile is in themes/bodensee
the css is generated in themes/bodensee/css
the less files are in themes/bodensee/less
the maps are in the same folder as the css files.
My problem is that css files misses the themes/bodensee path, so it raises a file not found on css.map files.
lessc -s less/wlb.less --clean-css="--s0 --advanced" --source-map-rootpath=themes/bodensee/ --source-map="css/wlb.css.map" css/wlb.css
The CSS file now contains `sourceMappingURL=css/wlb.css.map``The rootpath does not have any effect.
I also tried a fantasy rootpath and searched for it in the file - it does not appear anywhere. But the option is correct. When I try to missspell the option, LESS drops an error.
What am I missing?
Description of the --source-map-rootpath option from here
Specifies a rootpath that should be prepended to each of the less file paths inside the sourcemap and also to the path to the map file specified in your output css.
Because the basepath defaults to the directory of the input less file, the rootpath defaults to the path from the sourcemap output file to the base directory of the input less file.
Use this option if for instance you have a css file generated in the root on your web server but have your source less/css/map files in a different folder. So for the option above you might have
The problem was indeed related to the Clean-CSS plugin.
I now call
lessc --source-map --clean-css="--s0 --advanced" -s less/wlb.less css/wlb.css which is working.
There is a standalone clean-css program, but that does not generate sources for the Less files. It's not clear if the lessc plugin and the standalone tool are the same or different implementations but both use node.
The standalone cleancss tool removes the source map URL generated by lessc be default (did not play around with the dozens of options).
These Node tools develop very fast and manual/tutorials often are outdated. That's why my make file stopped working. Developers of that tools should really consider not to touch working parameters or features and to keep their code compatible.
When you set the regex after the test key in a loader object, does that look through all files in your project and load them using the loader you've designated, even if those files weren't required by the file in your entry point? Does this then get placed in the bundle.js file?
No it will only include what is required by your script.
<img src={ require('../some/img.png') } /> is a way to tell Webpack that your source code needs this image to run.
In a production Webpack build, this will get compiled into something like <img src="http://yoursite/whatever/89de0f2.png" />. The require() statement is never executed, it's replaced with valid Javascript code. This replaced code is what's put in bundle.js.
The image is then put into whatever output folder you specify (like a local dist/ folder), and it's renamed to something unique, which is usually some hash of the file contents, resulting in 89de0f2.png. (I made up this name for the example, but it usually looks something like that).
Now when you upload that file, 89de0f2.png, your source code will reference 89de0f2.png exactly, so that version of the image is guaranteed to exist. This is how Webpack gives you production guaranteed asset loading.
Wepback will only put img.png in your dist/ folder as 89de0f2.png if you specifically require it. Any other images will not be put in that folder.
You may also be asking about base64 encoding images and putting them directly into your bundle.js file. In this case, no image is put into dist/, but all the other rules reply. The require() call is still replaced with valid Javascript.
There is one case where Webpack will require multiple assets. You can require patterns, like <img src={ require.context( './images', true, /\.png/ ) } /> and Webpack will build all png files in that directory into the dist/ folder. See this Stackoverflow question for more context.
Bottom line I need lessc to compile my main.less file to $CATALINA_EC_TMP/main.css
I'm working on this project, where I need to generate multiple output css files originating from the same source (LESS file) using LESSC.
So with Jet Brain's (WebStorm or IntelliJ Idea) File Watcher, I don't get much of options to save the output files to a custom path using an environment variable.
The reason why I use an environment variable is because some of the outputted files is in a temporary path (it changes whenever I deploy with ant)
That said ...
This is my Environment Variable:
$CATALINA_EC_TMP = '/foo/bar/'
and it's changing so in the next deployment, it won't be /foo/bar/ anymore.
and this is the command line that's being executed by my IDE to compile less files
/usr/local/bin/lessc --no-color main.less
I need lessc to compile my main.less file to $CATALINA_EC_TMP/main.css
so the resulting file would be in that case /foo/bar/main.css or wherever the $CATALINA_EC_TMP value is.
I hope that there's a solution to this, anyway if it doesn't exist I think I'll use fswatcher to copy my generated css files into my destinations whenever I compile.
Let's say I separate a less files into many less files to be easy to organize.
Here is my repository:
/reset.less
/variables.less
/mixins.less
/main.less
/styles.less
The styles.less is just importing the other files:
#import "reset.less";
#import "mixins.less";
#import "variables.less";
#import "main.less";
However, when I add some codes into main.less and use the #line-color which is defined in the variables.less. It shows Name Error: variable #line-color is undefined and I cannot compile it- I use PHPStorm with less plugin.
Could you pleas suggest me?
You have to import your variables.less to all files which use your variables.
Edit:
You have to compile only your style.less. You cannot compile the main.less because it doesn't know the variables.less but you don't want a main.CSS anyway, do you?
You should get the correct style.css which is (I guess) the only css file you'll need.
I could solve it by doing the following in PHPstorm:
Open Preferences…
In Tools > File Watchers > Less (configure)
Check "track only root files"
Change the "Output paths to refresh" to ../css/$FileNameWithoutExtension$.css (added "../css/" in front - depending on what folder you'd like to write the css files into)
(At this point you may want to check if this already does the job to your liking. If it doesn't, carry on to the next step…)
In Other Settings > LESS Profiles > (Your profile) (configure)
Define "LESS source directory": /Users/macuser/htdocs/MySite/sites/all/themes/mytheme/less (depending on which folder contains the .less files)
Define "Include file by path": /Users/macuser/htdocs/MySite/sites/all/themes/mytheme/less/style.less (file name depending on which .less file compiles the other .less files)
Add "CSS output directory" by selecting the folder you wish to write the (minified) CSS files
Enable Compress CSS output if desired
Notice: If Compress CSS output is enabled, this means that the code will be compressed everytime you right-click a .less-file and hit "Compile to CSS". By default the output will not be compressed with every modification you make to the .less-file. If you do want to compress the CSS straight away,
Install less-plugin-clean-css using the following command in
Terminal: sudo npm install -g less-plugin-clean-css
Next, go to Tools > File Watchers > Less (configure), and change the "Arguments" to --clean-css --no-color $FileName$ (added "--clean-css" in front).
Now it will compile your CSS automatically while you're coding. You'll no longer need to compile manually.
I'm trying to get my head around bundles in MVC 4. From what I've read, you simply point it at a script or bunch of scripts, give it a name, and it'll bundle them up. If you're not in debug it will also minify them.
Sample Code:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
If it's done dynamically, why does the project have .min.js files for every script? Does the minifying process actually just load .min.js rather than minify it itself?
If you run in debug mode, the .debug.js files are included. If you run in release mode, the .min.js files are included. If the file is not .debug.js or .min.js, it's included in both cases.
In release mode, all the files, are minified and bundled in one file. No matter if they were or not were previously bundled.
I usually have the original, not .min.js or .debug.js files, and let the bundler do all the job of minification.
There is also another important thing you must be aware of: the bundler will reorder the included files according to internal rules. And, if you use wildcards, the files are included alfabetically. This can make fail your scripts if there are dependencies and they are included in the worng order. You can run your site in debug mode to check the order (look at the rendered script tags). If the order is wrong, you can tweak the file names or implement an IBundleOrderer.
This is a very interesting article on bundling.