I am importing several .less files into styles.less file like following
#import "foo1";
#import "foo2";
#import "foo3";
#import "foo4";
Now when I compile styles.less file it merge all .less files into styles.css. This approach is good when I want to deploy it to production but I want to compile all .less files separately
so that I could easily debug in my chrome dev tools in dev environment. How can I compile them in this way?
Compile the .less files separately. Then link all of them on the HTML page.
Related
When compiling scss from one folder to another folder, imported paths do not compile correctly. I assume I'm just doing something wrong. I haven't found any instructions for doing this (assuming its possible).
I have a "Styles" folder that contains my app.scss. I then compile it to wwwroot/css/app.css.
Solution Structure
Import in app.scss
Import in compiled app.css
Import in compiled app.css as read by browser
It should be under wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css instead of...
Compiler Config Defaults
Compiler Config
I rebooted my machine and now the path is compiling appropriately.
I am working on a Laravel 5.5 project with Bootstrap 4. When I compile SASS it returns me that everything it's ok but the imported CSS file is not being watched by SASS.
I have this file /resources/assets/sass/app.scss:
// Variables
#import "variables";
// Bootstrap
#import "~bootstrap/scss/bootstrap";
// Bootstrap Toggle
// #import "/resources/assets/css/bootstrap-toggle.css"
// CSS
#import "/resources/assets/css/app.css" <- I want this file to be compiled
When I compile SASS with npm run watch or npm run dev and I save the previous file the console shows me how it is compiled successfully like this:
As a test, when I change "app.css" to "app.csss", the console displays an error when compiling, so the file it is being loaded.
But when I save something in that file app.css nothing changes, I've tried even to clear the browser's cache but the console shows me nothing. So the file is not being compiled.
What am I doing wrong?
I am compiling SCSS files to CSS files using compass, but after compiling I'm getting duplicates in CSS file. Is there a way to compile without getting the duplicates?
I have a few scss entrypoints (main.scss) which import other scss files with #import "components/popup".
Directory structure is as followed:
scss
main.scss
components
_popup.scss
_carousel.scss
otherScssDir
main.scss
components
_datepicker.scss
_dropdown.scss
When watching for changes on all my scss files with grunt-contrib-watch, both the entrypoints (main.scss) will be compiled to css. It would be ideal to only compile entrypoints where the imported scss files have been changed.
I'm using grunt-newer to check if files have been changed.
Is it possible to do this? A nudge in the right direction would be greatly appreciated.
Can I compile scss from project folder created with foundation new project with sass?
Why js folder had only app.js file, should I move files from bower_components/foundation/jsto (root)/js or link to their folder?
Should user css settings includes in app.css or custom file that includes app.css?
In bootstrap sass files collected in one folder, why in foundation scss folder had only app.scss and other files in bower components.
When you install Foundation this way, you use the SCSS folder created that contains the _settings.scss & app.scss. The app.scss is what you tend to use as your base SCSS file to compile from so you'd include all your other SCSS files to this one. You can move this file to elsewhere if you please but move the config.rb with it and make sure the add_import_path works from where you move it to.
You don't need to move the files, everything in bower_components should never be touched or moved, they are there so they can be upgraded when necessary, you shouldn't have to touch base Foundation files.
I said before you should use that, but you could include the app.scss into a custom scss file but it's better to have control of the Foundation imports in 1 file, in my opinion.
For the same reason i mentioned in 2, so you don't touch them and Bower can easily update them if you require.