Here is my current (the relevant portion) gulpfile:
gulp.task('styles', function() {
return gulp.src('app/stylesheets/main.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulpif(production, cssmin()))
.pipe(gulp.dest('public/css'))
.pipe(livereload());
});
With following main.scss:
#import "normalize";
#import "foundation";
here's the folder structure of the app/stylesheets folder:
-- app -- stylesheets ---foundation.scss
|-normalize.scss
|-main.scss
|-foundation-------_functions.scss
|-_settings.scss
|-_components/
The resulting main.css file after gulp processing ends up containing only the normalize.scss styles and what looks like the _tables.scss and _visibility.scss components.
I have tried using includePaths with gulp-sass and that didn't compile anything at all.
Also, importing the css rather than scss in the main.scss file works just fine, but I want to change the row-width setting to 100%, so I'd like to use the scss files.
All foundation files were left as is. Please help me understand why not all the components are importing! Thank you!
Check the foundation.scss file, you need to initialize the mixins to be available, either by calling them one by one or calling them all with the provided fun by foundation:
#import 'foundation';
#include foundation-everything;
Hope this helps.
Related
I'm working on a theme and plugin that share components. In my theme I have a scss file and in this I want to import a main.scss file from my plugin. This is the situation:
Plugin main.scss
#import "slick";
#import "slick_theme";
#import "~bootstrap/scss/bootstrap";
#import "~aos/dist/aos.css";
#import "../../../my-directory/**/*.scss";
Theme main.scss
#import "../../plugins/my-plugin/assets/src/scss/main";
II can't compile the main.scss of my theme because it can't resolve the url of node_modules and the directory with wildcards.
Any ideas?
(A) Easiest (and fastest!) way: Use full relative path!
As SASS don't support the wild cards in SASS files using #-rules: just remove wild cards and write full relative path to node-modules like #import '../../complete/relative/path/to/node/module/dir/file.scss' ;-)
(B) ALTERNATIVE: Set includePath
Set node directory as includePath for your project. As I don't know the compiler you use here are the information how to do in original SASS (but 'includePath' variable is almost the same):
https://sass-lang.com/documentation/js-api#includepaths
In that case you are able to #import only by using the filename.
Additional notes:
In SASS rule #import does NOT support mulitple includes at all. Means: in a SASS file #import '*.scss' (as you try in your example by using wildcard * in filename) will not work at all. You ALLWAYS need to specify a concrete single file: #import 'concreteFile.scss'.
In SASS you can remove the suffix .scss from filenames. As this #import path/to/filename'` works as well.
Hey guys I'm a newbie learning sass and I'm using node.js and cmd to serve as my local compiler. I have a main.scss file where I have done all my #imports. This is an image of main.scss with all imports Anytime I try to save my work, I get an error saying my variables are undefined, meanwhile they are.
This is the error.
And this is where the supposed error is. Meanwhile my variable.scss is intact, take a look here
So I guess the question is, how do I make my #imports global in my project.
Double Check your variable $color-primary-light if it is define in your scss file. Or change the #import "base/typography function and transfer it to the upper most part of your main.scss.
Scss reads imports from top to bottom and there are some css specificity/hierarchy of css when compiling them into one css file.
#import "base/typography
#import "base/base
#import "base/animations
#import "base/utilities
I'm starting to work on a large application styling files. As Bootstrap 4 offers SASS files, I decided to follow that path.
I have built the following files structure:
theme.scss: general definitios for the theme like colors and fonts. Today there is just one but there could be more in the future.
global.scss: includes Bootstrap, some Bootstrap overrides and application componentes -i.e. a field with its label as part of the top border.
site.scss: general application styles.
additional page-specific SCSS files. I.e.: login.scss.
The problem I'm having is that global.scss -the one that imports Bootstrap- is then imported by site.scss as well as other files like page-specific SCSS files. So, Bootstrap styles end up in more than one compiled CSS. Compiled CSS files are what the application actually references.
I've previously used LESS and I could solve this using #import (reference) "bootstrap" instead of just plain #import "bootstrap". With SASS I haven't been able to find any solution to this problem without modifying Bootstrap core files.
Is there any other recommended way to organize the files and avoid this problem? Am I missing something or doing anything wrong?
Here are the files contents (they are large files but I'm posting only enough contents to show the problem I'm having):
theme.scss
$my-primary-color: #04459a;
global.scss
#import "../theme.scss";
$primary: $my-primary-color;
#import "../../third-party/bootstrap/scss/bootstrap.scss";
%field{
// [...]
}
site.scss
#import "global.scss";
div.field {
#extend %field;
}
// [...]
login.scss (or many other)
#import "global.scss";
// [...]
In the application I'm referencing site.css and login.css (in the loign page, of course) and both of them include Bootstrap styles.
I've built something that works for me, not sure if it's the best solution or which drawbacks it has, though.
I took some ideas from this article: My favored SCSS setup with Bootstrap 4. Here's what I've built:
First I created two SASS files for importing Bootstrap (similar to what the article does with bootstrap/_config.scss but splitted):
bootstrap/_sass-componentes.scss
#import "../../terceros/bootstrap/scss/_functions.scss";
#import "../../terceros/bootstrap/scss/_variables";
#import "../../terceros/bootstrap/scss/_mixins";
bootstrap/_config.scss
#import "_sass-componentes.scss";
// Every other bootstrap file I want to include:
#import "../../terceros/bootstrap/scss/_root";
#import "../../terceros/bootstrap/scss/_reboot";
#import "../../terceros/bootstrap/scss/_type";
// [...]
#import "../../terceros/bootstrap/scss/_utilities";
#import "../../terceros/bootstrap/scss/_print";
Then in global.scss I changed the bootstrap.scss import line to import only bootstrap/_sass-componentes.scss
Finally, in site.scss I included global.scss (such as it was before) and then full Bootstrap files trough bootstrap/_config.scss. **
** After importing _config.scss I also import my Bootstrap customizations. For doing them I followed the recomendation of the linked article although they do not apply directly to my own question.
I'm compiling my SCSS with gulp-scss. My styles.scss file looks like this:
#import "node_modules/bulma/sass/utilities/initial-variables";
#import "node_modules/bulma/bulma";
#import 'src/styles/navigation';
The second line of this code imports Bulma, the source code for which can be found here. This file imports some utilities, including some mixins I need.
Unfortunately when I try to use those mixins in my navigation.scss file:
#include desktop {
.navbar {
min-height: 135px;
}
}
I get the following error:
Worth noting that if I #import the mixins and variables file in navigation.scss directly, it works fine. What's going on here?
The problem was with my file names. They were not preceeded by an underscore, which appears to be the convention for the compiler to work properly. So src/styles/navigation.scss became src/styles/_navigation.scss. The import remained the same:
#import 'src/styles/navigation';
I will assume you use gulp-sass.
What I usually do is creating a path in the gulp file for better reference and also for letting know gulp I will be using these node resources in .scss files.
In this case I'm calling foundation and compass mixins modules in the include paths.
This is a task in the Gulfile.js
gulp.task('styles', function () {
gulp.src('src/scss/application.scss')
.pipe(sass({
includePaths: [
'node_modules/foundation-sites/scss',
'node_modules/compass-mixins/lib'
],
outputStyle: 'compressed'
}).on('error', sass.logError))
.pipe(gulp.dest('./public/css/'))
});
Then in your main .scss or where you want to place the import for those files you can just simply add:
#import 'compass';
#import 'foundation';
#include foundation-everything;
Here I call the compass file inside this node module path I specified in the gulp file, and also the foundation.scss (which imports a lot of other scss files).
Then once foundation is availabe I initialize all the mixins.
So summing up:
Possible solutons:
1: Check if this gulpfile definition with include path solves you routes errors.
2: check if the modules you are importing don't have a trigger mixin to enable them, such as foundation has his "foundation-everything"
Hope this helps.
I have next situation.
I have core.scss file:
#import "fonts";
#import "custom_mixins";
#import "variables";
#import "base";
where I generally add all subfiles into one central.
Next with compass and gulp I compile this file:
gulp.task('compass', function() {
return gulp.src('css/src/core.scss')
.pipe(compass({
config_file: './config.rb',
css: 'css/dist',
sass: 'css/src'
}));
});
It works fine but here I have the problem. Each time I change for example one line in _variables.scss, this task recompiles all files to core.css file. It takes near 2s for one line change. Is there any way I can cache unchaged scss subfiles so that they wont be recompiled each time?
I know there is an option in Gulp using gulp-remember plugin to remember compiled unchanged css files before concatenating them. But here I have one css file created from one scss file...
I recommend you to use gulp-sass instead of compass. Compass is just a bunch of mixins and functions you can yourself integrate in your files without the need to compass dependency. Gulp-sass is faster than the sass compilation with Ruby because is using libsass, a port of Sass in C++.
First you'll need to install node-sass with NPM or Yarn and call it in your Gulpfile.
var gulp = require('gulp');
var sass = require('gulp-sass');
You'll change your compass task to the sass version:
gulp.task('sass', function() {
return gulp.src('css/src/core.scss')
.pipe(sass({
outputStyle: 'nested'
}).on('error', sass.logError))
.pipe(gulp.dest('css/dist')
});
Try, your compilation will probably be faster. You can change sass options, add sourcemaps and others options.