I would like to know if it's possible to write just a name of a folder and every file inside would be automatically imported?
For example, I have a main.scss which contains only imports
#import "components/forms";
#import "components/header";
#import 'components/intro';
and I would like to just write
#import "components/**/*";
So every file inside components will be imported as above.
I can use sass-globbing. It lets me import directories or whole directory trees with a single #import statement:
// import a directory's contents
#import 'dir/*';
// recursively import a directory's contents and any sub-directories:
#import 'dir/**/*';
I’ll install it from the command line
gem install sass-globbing
more here on Github plugin homepage.
Related
I'm using Angular (Jhipster) on my application and I want to import several .scss files on my glocal.scss file. So I created an "util" folder (same level as global.scss file) and added these .scss partials inside it. On top of my global.scss file, I treid to do:
#import "util";
#import "util/*";
#import "util/;
And other alternatives, but I'm receiving this error:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
Can't find stylesheet to import.
When I import one file at a time, it works.
How can I import a folder with .scss files inside my global .scss file?
I doesn't look like you can import a directory/folder based on this.
What you can do is in your utils folder create an index sass file that imports all the partials then importing utils should work based on this.
i'm using grunt-sass/node-sass for compiling my scss files.
i have a lot of scss-files like btn.scss, panel.scss etc. component like.
i'm NOT mergin all scss files in one big css file (styles.css) - instead I compile like all separated css files (btn.css, panel.css etc.)
because I have globals scss files like variables.scss, mixins.scss etc. I have to import these files in every single scss file. for example in btn.scss I need to write everytime the #import directive (ex. #import 'variables, #import mixing etc.'). of course I could merge all globals files in one file and the just import that file.
is there a more elegant way to precomile or to inject these global files before or while compiling with grunt-sass?
thx!
In Less I can do something like this
#basePath:"../../some_crazy_project_path_to_repeat/less/";
#import "#{basePath}less.less";
So I tried to do the same thing in Sass
$basePath:"../../some_crazy_project_path_to_repeat/less/";
#import "${basePath}less.scss";
// Syntax error: File to import not found or unreadable: ${basePath}less.scss.
and
#import "#{basePath}less.scss";
// Syntax error: File to import not found or unreadable: #{basePath}less.scss.
Is there a way to do this in Sass?
You can't use conditional stuff for imports in SASS.
Consider creating a Compass extension out of your project.
You cannot use variables in import paths as already mentioned. What you can do is use the -I or --load-path option to specify a directory to search from.
sass --watch sass/:css/ --load-path ../../path/to/library/
Let's say you have a directory structure like this:
themes
hotdog
_variables.scss
classic
_variables.scss
styles.scss
Your styles.scss should have import paths that are relative to the provided load-path(s):
// note the import here doesn't contain themes, hotdog, or classic
#import "variables";
#debug $foo;
Your commands would look something like this:
# hotdog
sass styles.scss hotdog.css --load-path ./themes/hotdog/
# classic
sass styles.scss classic.css --load-path ./themes/classic/
See the Sass options documentation for more information.
I'm working on a project with webpack to load all my assets.
I load my assets like that in app.js and concat them with ExtractTextPlugin:
import 'foundation-sites/scss/normalize.scss';
import 'foundation-sites/scss/foundation.scss';
import './../sass/app.scss';
I read somewhere that webpack will read each line and one by one compile to CSS and append them to my dist file.
My problem is that I want to access the variables and mixins in foundation from the app.scss, but since they are compile one after the other and appended, it doesn't seem possible to access those mixins and variables. Any one has a solution?
You need to load your dependent .scss files within app.scss.
To do this with webpack. I've configured my app.scss like so:
#import '~foundation-sites/scss/foundation';
#import 'settings';
#include foundation-everything($flex: true);
// the rest of my imports now have access to Foundation mixins
#import 'mycomponent.scss'
The ~ tells sass-loader to tell webpack to look in the modules directory for those files.
I have two less files. one named main.less which imports bootstrap.less (which includes bootstrap variables.. etc.) and dash.less which has just styles for my dashboard. These two files should generate two css files. main.css and dash.css.
I'm including the main.css in to all my pages and the dash.css in to just the dashboard.
What i'm trying to do is: compile the main.less with included bootstrap variables in to main.css. Then compile the dash.less using the bootstrap.less variables in to dash.css. However this will result the contents of bootstrap.less to be included again in the dash.css which i don't want because i'm already including the main.css in my html.
Has anyone ever came across this ?
After trying several methods my decision was to use a grunt task to remove the duplicate css blocks.
Found a way. I had to use import like this:
#import (reference) "bootstrap.less";
.myclass{color:#bootstrap-variable;}
.anotherclass{.classDefinedInBootstrapLessWhichUsesAVariableDefinedInVariablesLess}
Using "reference" will source the imported file but not include it.
Compiling all less files to one file will be good .But if you want to have variables of bootstrap.less in dash.less. Then there is one solution , if you see in bootstrap with less dump in bootstrap.less , component wise less files are included like -
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
// Reset
#import "normalize.less";
#import "print.less";
etc.so if you want to use variables you can import '#import "variables.less"' in your 'dash.less' thats it :)