LESS and CSS Imports - Going Crazy <p>I have an issue currently with my LESS and CSS where an import into Bootstrap.less is being called before an overriding file, yet the first import is overriding the CSS..</p> <p>As an example, let's say my bootstrap.less file looks like this:</p> <pre><code>/* ALL STANDARD BOOTSTRAP LESS FILE HERE*/ // Generic Widget Styles @import "components/_widget-styles.less"; // Header Area @import "components/_header-area.less"; // Global Search Spinner @import "components/_search-spinner.less"; // Smart Feed @import "components/_smart-feed.less"; // Home Page Container @import "components/_home-container.less"; // Footer @import "components/_footer.less"; // Documents Page Container @import "components/_documents.less"; </code></pre> <p>My Generic Widgets styles have some styles that can be used and overriden all over the site and in the home page container I do just that and it works fine, however for some reason I am having to use !important to override any styles which isn't really a great thing to do imo. Should it use the last style to be added to the CSS file?</p>