Duplicate files while compiling SCSS file to CSS files in compass - css

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?

Related

Sass compiler extension, Watch Sass don't compiling all sass files

My project have 2 .scss files, but only one of them is compiling by extension. Maybe I need to compile manually?
You have error there.
The variable named $blue1 is not found.

Use webpack to compile .scss files without js

Is it possible to use webpack to compile a directory of scss files to a directory of css files?
I don't want to use the sass command line tool because it's part of an angular project and with the help of custom builders I can run the webpack script with only ng build
e.g.
- src
- themes
- theme-dark.scss
- theme-light.scss
to
- dist
- themes
- theme-light.css
- theme-dark.css
Hower I think this is currently not possible because webpack seems to need the scss imported in javascript and not in single files and writes the generated files to js and not css.
Is that what I want even possible with webpack or do I need another tool?
You can use Sass compiler to compile scss to css with a single command. Exactly the use-case you are looking for.
sass --watch src/themes:dist/themes
watch will compile on a file change (optional)

SASS Directory won't change

I keep trying to run sass --watch scss:css on a directory and unfortunately, the scss files are not compiling.
SASS does confirm that it's watching for changes, but I've noticed that it is looking in my Program Files directory.
My project with the actual SCSS and CSS files is in my C/username/documents/project/assets directory. If I try to enter that path explicitly in the sass --watch command, I get an error message.
How can I specify the correct directory so SASS will stop trying to compile my files in Program Files?
First make sure your sass is working well and you can try below option for compiling into different folder.
sass --watch input-dir:output-dir

importing .less files are compiled into single .css file

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.

Where are compiled SCSS files in a GEM stored?

I include in my project a GEM which in it has (under /vendor/assets/stylesheets) a 'src'-directory with some SCSS files.
In development mode, when these scss files are compiled to css, where are they (the css files) stored? I can find nothing under neither "vendor" nor "lib". In tmp?
The reason I ask is that one "*= require" fails and since it references a scss file in the gem I want to know what is happening.

Resources