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.
Related
I have tried to set up some global Scss in my Gatsby application, but it looks like after doing this i am seeing some odd behaviour in dev tools:
You can see that my global styles are appearing and being overwritten multiple times.
It is a Gatsby app so i am using sass-loader and the default dart-sass.
Here is how i have configure my gatsby-config.js file to allow me to use these global styles based on this stackoverflow post: https://stackoverflow.com/a/65904094/12119984
module.exports = {
plugins: [
...
{
resolve: `gatsby-plugin-sass`,
options: {
additionalData: `#use 'main' as *;`,
//allow mixins, variables etc to be accessible globally
sassOptions: {
includePaths: [`${__dirname}/src/styles/sass`],
// data: `#import "main.scss";`,
},
},
}...
I the use #forward along with #extend to get it all working in my module.scss files. My folder structure looks like this:
My global styles are in base.scss and I import them into main.scss using #forward:
#forward "base";
#forward "layout";
#forward "components";
As an exmaple, here is my index.module.scss file where i then use these global styles:
.sectionHome {
...
h1 {
background-color: $color-secondary;
#extend .uMarginBottomLarge;
#extend .headingPrimary;
}
}
It seems like a reasonable approach to me to use some global styles but to extend them into local sccs module classes, so can anyone explain to why these global styles are being applied several times?
The #forward rule, according to the docs:
The #forward rule loads a Sass stylesheet and makes its mixins,
functions, and variables available when your stylesheet is loaded with
the #use rule. It makes it possible to organize Sass libraries across
many files, while allowing their users to load a single entrypoint
file.
So basically, each time you are requesting a CSS module in some component, you are importing all the nested extensions (#extend and #use). Moreover, because of React's component extensions, you may also nest styles when importing nested components (Button in Layout, Layout in a index.js, etc)
Global styles in CSS apply exactly in the same way as CSS "standard" files, as you can see in Gatsby's docs, extending its documentation, you will need to add the following in your gatsby-browser.js:
import "./src/styles/sass/main.scss"
I'm creating a vue.js web app, and I'd like to use SCSS to help with the styling. I've installed npm i node-sass sass-loader and I've created a vue.config.js at root level. In it I have this set
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `#import "#/styles/global.scss";`
}
}
}
};
This is SCSS the folder structure
In every subfolder to the main styles folder I have a _all.scss that then imports every containing .scss file for that given subfolder. And in the global.scss all the subfolders _all.scss files gets imported.
// styles/base/_all.scss
#import 'reset.scss';
#import 'variables.scss';
// global.scss
#import 'base/all';
#import 'components/all';
My issue is that my web app doesn't load any of the .scss files or styles imported via the main global.scss file. I get no build errors, and if I for example remove the _variables.scss file, then I get an error that other .scss files can't access the declared scss variables. So that means that my .scss import method is woriking, but the styles aren't shown somehow.
Do I have to use every vue components <style> tag to do all the styling, or can I go about doing it the way I've structured it now?
I prefer not messing with the webpack config.
you can import your style in the main.js also
import '#/styles/global.scss';
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.
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.
Is there an option in LESS to import the contents of a CSS file rather than adding an #import directive?
Example
//example.less
#import url("../Css/site.css");
#import url("components.less");
//example.css
#import url("site.css"); // I DON'T WANT THIS!
.component1 { ... }
.component2 { ... }
Can this be done with LESS?
In less you have different options for importing.
Syntax: #import (keyword) "filename";
The following import directives have been implemented:
reference: use a Less file but do not output it
inline: include the source file in the output but do not process it
less: treat the file as a Less file, no matter what the file extension
css: treat the file as a CSS file, no matter what the file extension
once: only include the file once (this is default behavior)
multiple: include the file multiple times
optional: continue compiling when file is not found
More than one keyword per #import is allowed, you will have to use
commas to seperate the keywords: Example: #import (optional,
reference) "foo.less";
more info in docs.
To answer my own question; YES!
#import (less) url("../Css/site.css");