We are using the BundleTransformer in our ASP.NET MVC project to bundle our style files.
This works great, but we noticed that some CSS files are not bundled with our LESS files when we important them in LESS with the #import CSS at-rule.
Sample in our root LESS file:
/* Import core LESS files */
#import "../core.less";
/* Import jQuery UI stuff*/
#import "../themes/base/core.css";
#import "../themes/base/resizable.css";
#import "../themes/base/accordion.css";
#import "../themes/base/tabs.css";
/* Import more LESS files */
#import "../morestyles.less";
If we look at the files that are downloaded from Chrome, it is clear that the CSS files are not bundled with the root LESS files.
Naturally, we could simply include these CSS files in the BundleConfig and remove the #import calls, but I was just curious to see if there is a way to have them bundled together.
You should read http://lesscss.org/features/#import-options.
In your code #import "../themes/base/tabs.css"; compiles into #import "../themes/base/tabs.css"; (due to the .css extension). Which is a "normal" CSS import, CSS imports require an additional HTTP request to load.
You can use the inline option:
#import (inline) "../themes/base/tabs.css";
The above inlines the code from tabs.css into your project file without processing it.
Related
Right now I have all the unmodified bootstrap files a copy of those files for customization.
These folders:
--> Bootstrap
--> Custom (copy of the above)
I first include boostrap files and then the custom files, which right now are an exact copy.
Let's say I start changing values in "Custom" in order to get the desired looks. Then I update boostrap to a new version, by updating the bootstrap folder. A lot of changes might not come through since the previous version is basically copied to "Custom" even if the css rules haven't been changed at all.
Is this the correct way to do it, or should I try a different approach?
There are 2 ways to do this
First i need to understand you project folder struture i would reccomend this
dist
-/css
-/styles.css
src
-/scss
-styles.scss
-/bootstrap
-bootstrap.scss (taken from the scss folder)
-_variables.scss (taken from the scss folder)
Using this stucture your project only needs the styles.scss which will import the bootstrap folder below it and then compile into your dist folder to ouput your CSS (i would reccommend webpack or gulp for this if you know how to do thiat)
The main this in that the bootstrap.scss file is set-up like this below (in this example i am using node_modules as i have imported bootstrap using npm into my project. But this is a relative path for where the files live, so make your path to the same files is correct to how you have strutured your project)
Bootstrap.scss
Just notice that the variables file is pointing to the local one, not the one that sits in the main repo folder.
/*!
* Bootstrap v4.2.1 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
#import "./node_modules/bootstrap/scss/functions";
#import "../bootstrap/_variables.scss";
/*#import "./node_modules/bootstrap/scss/variables.scss";*/
#import "./node_modules/bootstrap/scss/mixins";
#import "./node_modules/bootstrap/scss/root";
#import "./node_modules/bootstrap/scss/reboot";
#import "./node_modules/bootstrap/scss/type";
#import "./node_modules/bootstrap/scss/images";
#import "./node_modules/bootstrap/scss/code";
#import "./node_modules/bootstrap/scss/grid";
#import "./node_modules/bootstrap/scss/tables";
#import "./node_modules/bootstrap/scss/forms";
#import "./node_modules/bootstrap/scss/buttons";
#import "./node_modules/bootstrap/scss/transitions";
#import "./node_modules/bootstrap/scss/dropdown";
#import "./node_modules/bootstrap/scss/button-group";
#import "./node_modules/bootstrap/scss/input-group";
#import "./node_modules/bootstrap/scss/custom-forms";
#import "./node_modules/bootstrap/scss/nav";
#import "./node_modules/bootstrap/scss/navbar";
#import "./node_modules/bootstrap/scss/card";
#import "./node_modules/bootstrap/scss/breadcrumb";
#import "./node_modules/bootstrap/scss/pagination";
#import "./node_modules/bootstrap/scss/badge";
#import "./node_modules/bootstrap/scss/jumbotron";
#import "./node_modules/bootstrap/scss/alert";
#import "./node_modules/bootstrap/scss/progress";
#import "./node_modules/bootstrap/scss/list-group";
#import "./node_modules/bootstrap/scss/close";
#import "./node_modules/bootstrap/scss/toasts";
#import "./node_modules/bootstrap/scss/modal";
#import "./node_modules/bootstrap/scss/tooltip";
#import "./node_modules/bootstrap/scss/popover";
#import "./node_modules/bootstrap/scss/carousel";
#import "./node_modules/bootstrap/scss/spinners";
#import "./node_modules/bootstrap/scss/utilities";
Styles.scss
This is the file that you will need to complie and then that will output your custom CSS
#import 'bootstrap/bootstrap.scss';
the variables file so long as you copied this from the repo version you are using (important as with the various version, if you use the incorrect version then you will get complie errors for variables not being present) You should be able to customise bootstrap colours, breakpoints, cols, rows and much more to get bootstrap the way you want it.
My Rails 4.2 now uses many Sass variables, and it was switched from relying on sprockets require statements to Sass #import statements. It now has 2 issues in development:
Pages may load a little slower
When I refresh a page, CSS changes don't always show up, so I need to open the page in a new tab.
How can I fix this?
application.css:
*= require_self
*= require main.scss
main.scss:
#import "bootstrap";
#import "base/variables.scss";
#import "styles/home.scss";
#import "styles/pages.scss";
//remaining CSS pages
_home.scss:
/* various styles, no import statement */
_variables.scss:
$color-red: #F23C3A;
//...
One thing I would look at would be removing the file extensions of your Sass imports, and also renaming application.css to application.scss so the file knows it will be precompiling Sass to CSS.
application.scss
#import "main";
main.scss
#import "base/variables";
#import "styles/home";
#import "styles/pages";
If you are using Bootstrap Sass their documentation walks through setting up your file structure to include Sass in your project.
In your config/environments/development.rb, ensure that it includes
config.cache_classes = false
This way, all assets and code will be reloaded each time the page is refreshed. You will usually only need to reload the server after a migration.
I am trying to compile LESS files together.
/* frameworks */
#gitpath: "./../../../../git/";
#import "#{gitpath}normalize.css/normalize.css";
#import "#{gitpath}lesshat/build/lesshat-prefixed.less";
#import "#{gitpath}Semantic-UI/build/packaged/css/semantic.css";
/*custom*/
#import "variables.less";
#import "layout.less";
The problem is imports of normalize.css and semantic.css don't get compiled.
I tried to use inline directive:
#import (inline) "#{gitpath}normalize.css/normalize.css";
but then minification flag [-x] does not work when compiling through lessc command.
Any idea how to deal with this? Or better, is there any better practice how to use up-to-date CSS libraries in your projects? Currently I am storing them in a local git repository and try to use them among my projects.
Thank you
Is it possible to prevent SASS from merging files included via #import?
For development, i would like to maintain the references of the original CSS (in my setup compiled from SASS already).
The docs for the #import rule says that:
All imported SCSS and Sass files will be merged together into a single CSS output file.
And explain that there is some circumstances under which it will compile to a CSS #import rule:
If the file's extension is .css.
If the filename begins with http://.
If the filename is a url().
If the #import has any media queries.
The following rules will tell SASS to merge imported files:
#import "foo.scss";
#import "foo";
The following rules will tell SASS to NOT merge imported files:
#import "foo.css";
#import "foo" screen;
#import "http://foo.com/bar";
#import url(foo);
When working with lesscss I would like to join two or three .less files into one super css file.
I know that you can do it using some little ruby magic, but I would like to know if there is something simple in the less engine?
You can use import, similar to how you can in a regular CSS file.
#import "reset";
#import "config";
#import "header";
#import "forms";
Taken from this SO post. It's also mentioned in the "Importing" section of the Less Documentation.
Simple solution:
Create a main.less file and open it (name it as you like)
Import your other css and less files via #import
#import "filename.less"; for less files
#import "filename.css"; for css files.
Compile your main.less file and just include this main.css in your site
Smile :)