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!
Related
I have a folder with all my .scss files that I want to compile into .css files using gulp. My gulpfile.js looks like this:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass',
function (){
return gulp.src('css/modules/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
}
);
When I run the gulp sass command, I get the error that a variable ($med-green) is not defined in blocks.scss. It is defined in base.scss, which gets compiled first because it compiled in alphabetical order (and I do end up with a base.css file). The main.scss file is in the css directory and all the other files are in the css/modules directory, so I know the paths are correct. The How do I get the variables to be visible to all the .scss files? What am I missing?
I also have a main.scss file that imports all my .scss files. If I could use that to compile them into 1 .css file (which is the ultimate goal), then that would be great. When I try to do that, I get the error "Error: File not found with singular glob". The main.scss file looks like this, where modules is a subfolder of css, where my main.scss file is.
#import "./modules/_reset.scss";
#import "./modules/_base.scss";
#import "./modules/_header.scss";
#import "./modules/_footer.scss";
#import "./modules/_blocks.scss";
#import "./modules/_interviews.scss";
#import "./modules/_search.scss";
in your case, there is two things to tell >>>
first: to solve your problem, you need to compile only one file (main.scss) that already imports all other scss files
second: scss files starting with ( _ ), get ignored when compiling in gulp-sass,
it is like telling the gulp-sass compiler that these files are for import only.
Try with this:
return gulp.src('css/main.scss')
in your sass task. You don't want individual css files for each of your modules/*.scss files, that is the point of partials and imports - you just want the one, main.scss, which imports them all. Individually, one file will not see the other's variables because each of them do not import all the others.
You want just main.css at the end to include in your html file.
I am currently restructuring my project using the 7-1 architecture as proposed in https://sass-guidelin.es/#architecture.
Now, i am using flaticons in my project. Where in the structure should i put the folder and scss file provided by flaticon, and where should i import it?
The 7-1 pattern lists the following sub-directories along with main.scss:
./
base/
components/
layout/
pages/
themes/
abstracts/
vendors/
main.scss
Where to place external library/framework scss
The vendors folder is meant for SCSS of external libraries/frameworks like _flaticons.scss
If flaticons is a directory with many things rather than a single file, then you can just place the whole flaticons directory in the vendor's folder.
Import
In main.scss in the sass-root directory: #import 'vendors/flaticons';
or the following if your stuff is in a directory: #import 'vendors/flaticons-directory/flaticons-main-file'
Be mindful of the ordering of imports in main.scss because it's possible to define general variables and mixins in one file, and refer to them in other files, so the files that define them must be imported before the files that use them.
Additionally, the SASS will be compiled to CSS rules in the same order that they are imported, so the normal inheritance / cascading will apply to the compiled CSS rules.
I have a _common.scss file which I import to various page.scss files:
page.scss:
#import "common";
#page {
...
}
_common.scss:
#import "partials/all";
#import "components/all";
...
But the problem is, since all my pages import _common.scss, the way I have things structured, if I make any changes inside _common.scss (or any of the files it imports), sass has to rebuild all the page css files. But if I just make _common.scss its own file and call it with a <link> tag (<link href="common.css">), then the page.scss file has errors, because it is trying to use variables and mixins defined in _common.scss and its imports.
Is it possible to structure my project so that the page.scss files can use all the mixins and variables in _common, but so that sass doesn't have to rebuild each page.css file each time I make a change to the common file? i.e. - make it so that sass only builds the common file when a change is made in common, and only builds the page file when a change is made in page?
I would say it is not possible, since the aim is to have one css for each page at the end. This said it HAS to be rebuild if something is changed in common.
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 :)