I am new to webpack. Want to know how do we lessify or convert less files into css using webpack, like we use cssify plugin in gulp.
You use webpack's less-loader (along with the css-loader and probably the style-loader) and require() the less file the same way you would a javascript module. See Using Loaders for more info on how loaders work in webpack.
You could take a look at Extract-Text-Webpack-Plugin. Basically, webpack is a JS module bundler so (as far as I know) there's no way to compile less directly into css. Instead, you can 'load' less file into js using something like less-loader and other loaders, and extract text to make separate css file using plugin.
Related
I was trying to import bootstrap's css and material design's one into my angular application but i found at the same time an issue and a compromise.
If I include them with "link href" in my index.cshtml file, I get as
result that this prevents my angular app from loading.
If I include them with #include into my main .css file (which is
called by require("style-loader!./styles.css"); ), it actually
works but this prevents my app from parallel .css download and the
result is that - yes, it works - but that slows my app a lot.
I saw that lot of people include them into the proper angular-cli json file but my app is not an angular cli application so I actually can't do that.
So the question is: can you suggest me what's the best way and the best practice to include the css in a non-angular cli application?
OTHER INFORMATIONS:
I am using also webpack, don't know if this changes or means something for my question
One thing good to know about the angular CLI is that in the background it makes a call to webpack to bundle your application with bootstrap
(if you put the proper line in the angular-cli.json file
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
)
As you are not using the angular.cli.json file, you have to directly import the bootstrap framework with webpack. A link which might help you to import boostrap with webpack : https://getbootstrap.com/docs/4.0/getting-started/webpack/
I hope it will be helpfull !
I would like a JavaScript file which builds and minifies an HTML and CSS file and pulls them as strings, possibly, so that it can all be one minified JS file to be used.
I'm curious what's the best flow for achieving this. I see that with gulp inject, this may work?
Found a solution: gulp-js-text-inject did exactly what I needed here.
Brunch works with almost the all template languages and has plugins for them, but I could't work with vanilla HTML. I just want that on every build brunch just copy my html files(wherever they are located) and paste under that appropriate location on public folder. I don't want to use jade, handlebars or whatever I just want to copy clean HTML files without any modification. Is that possible?
Put them in the assets folder like so:
app
assets
something.html
All files in the assets folder simply get copied.
That being said, unless your doing a single page website or don't plan on updating the HTML very often, it seems less than ideal to not use a template language if for nothing else than to avoid repeating yourself.
Also, note that you can use something like jaded-brunch, to have the files compile to static html files rather than JS. This is rather nice when you want the ease of working with HTML files server-side and still enjoy the benefits of using a template engine for development.
There is a plugin exactly for your use-case, which will compile, validate and minify your HTML templates located outside of assets directory, which is a must if you're working with templates in a folders-by-feature structure. The plugin also provides a default optimization, ready to be used in production environment.
I wish to keep views as modular as possible. In practice it means I have lots of small generalized HTML snippets, from which the actual HTML page is composed. Now ng-include and custom directives with templateUrl suit me quite well, but only in development, because each HTML snippet is being requested separately.
In production, however, I expect a single page app to be, ummm, in a single page, all bundled and minified — just like the JavaScript module loaders (RequireJS, Component, Browserify, DuoJS, etc.) would do to modular JavaScript files. No extra HTTP traffic for loading HTML chunks is acceptable.
Now I'm pretty sure AngularJS does not do bundling out-of-the-box (I would've found it by now), but maybe you guys have come up with something to address this issue?
P.S. It should be noted that I am not looking for cache-related solutions.
you can use grunt-angularjs-template
it does concatenates all templates in one file. as per its docs
Grunt build task to concatenate & register your AngularJS templates in
the $templateCache
if you are using gulp, the gulp equivalent of it is gulp-angular-templatecache
If you’re using gulp then a good option would be gulp-angular-embed-templates
So I'm trying to set up an environment where I can generate a new project and minimize the customization/complexity involved in setting up that new project. I'm using Structurer Pro (from nettuts+) to build the fileset, and this is an awesome thing. I've got github for MAC set up, allowing me to grab the latest Foundation framework files and put them in to the current project.
Now, I'm trying to incorporate LESS into the process also. However, Foundation's css files aren't currently set up with LESS, which means I have 2 options...(1) take a current version and LESS-ize them, then use those customized files to create new projects. (2) don't use LESS...
The other problem I have is, there seem to be quite a few compilers for LESS (simpLESS, CodeKit, LESS, compass), but none of them combine css files! So if I set up 10 LESS files (e.g. IE.less, mobile.less, grid.less, typography.less etc), and have the variables in them, I really don't want 10 css files as the output. I really want 1 compiled css file as the output. I know I can do this manually, or even through Clean css or any of the 30 other sites out there...
But is there one 'thing' out there that will let me use the latest files to create a project framework, customize it by applying a color swatch set to a series of variables (LESS), then compile & combine the resulting CSS for actual implementation?
Foundation ended up moving to SCSS in version 3, so this became kind of a moot point...
Trying to answer some of your questions:
Rename Foundation's .css files to .less and put in your /less/ directory.
Any .css file is a valid .less file (not vice versa though)
You don't have to convert this CSS to LESS, do so only for things you're going to be modifying, and save some time ;)
In your master.less file import these files with #import 'foundation-file';
re: how to combine css/less files :)
Compile only the master.less and include it in your HTML
master.less is your assumed MAIN stylesheet which may actually contain only #import statements, for me it's easier to manage everything this way (and where the combination happens). it will compile to master.css which you then use.
I'm not sure what css foundation includes, if it's a reset.css or something similar I would just leave it and not less-ize it. You would have two css files: one reset.css and one styles.css (the latter of which would be compiled from less files).
You could then add your own setup including a style.less which #imports the various components, if you make this generic enough you can reuse it throughout various projects.
The lessc compiler does handle the #imports of various files and combines them into one file: I have styles.less which #imports base.less components.less etc. I just compile the styles.less to styles.css and it handles the rest:
lessc styles.less styles.css
See: https://gist.github.com/1480684