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.
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 have a .scss file in one of installed node_modules. I want to import that scss file into .tsx file for the styling of a component that I am trying to create.
#mixin make-embedded-control($className: embedded-control){.....}
The scss file has the following mixin that has all the css classes that I intend to use it in my .tsx file but normal import is not working.
Due to compliance issues I am not able to share source code.
I am new to scss so I would be glad if anyone can help out.
You cannot use mixin in typescript.
To use a scss file in Typescript you have to:
Install SASS and its typing file if you are using typescript.
npm i -D node-sass
npm i -D #types/node-sass
Import scss file in your .ts
import './style.scss';
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 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.
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.