I'm using Gulp to compile my SASS files. I have a main styles.scss file which I am using to import other SASS files.
My styles.scss file looks like this..
#import "slider/slider_style";
.slider-nav li {border-radius: $dot-rounded;}
My slider/_slider_style.scss file looks like this:
$dot-rounded: 30px !default;
When I compile I get the following error:
Error: Undefined variable: "$dot-rounded".
on line 3 of styles.scss
I am at a complete loss as to why this is undefined. What am I doing wrong?
Related
I have two scss files in a folder scss which will be included into a primary app.scss file. All of these are transpiled to corresponding css files in /css folder:
scss/global/swatches.scss:
$swatch-bg: rgba(30,30,45,1);
scss/global/panels.scss
.panel {
background-color: $swatch-bg;
}
And then they are both included in my app.scss file:
scss/app.scss:
#import 'global/swatches.scss';
#import 'global/panels.scss';
and then I run:
sass --watch scss:css
This correctly creates all expected files inthe css/folder.
However, if I now modify panels.scss which contains a reference to a variable (imported in app.scss) the watcher complains it can't find the variable. But if I edit and save app.scss after, it will correctly compile and the variable is correctly parsed too.
So it seems, if I edit app.scss, any variables defined in any of the imported files will be available to subsequent imported files when sass is compiling. But this is only true when editing app.scss.
How can I get it to compile correctly without having to add the same imports to each file? Is what I am trying to do even possible?
I managed to resolve this by using partials instead in the following manner:
Firstly, rename all my imports to include a prefix, for example:
global/_swatches.scss
and then in my main file (app.scss) import is as follows:
#import 'global/swatches';
Notice the lack of the underscore and .scss file extension
I'm currently trying out parcel but I came across an issue. I can't use scss variables from an imported scss file.
#import "another_file.scss";
body {
background-color: map-get($colors-utility, 'error');
}
Error: Undefined variable: "$colors-utility".
Any Ideas?
I have a file named main.scs that imported a general.scss file that has at the first line this :
#import "compass/css3";
As you can see I imported compass/css3 to use some predefined mixins.
Of course all of them are in a larvel project. larvel have a built-in Mix library to compile scss and other type files.
Also I wrote these to webpack.mix.js file :
let mix = require('laravel-mix');
mix.sass('resources/assets/sass/main.scss', 'public/main/css');
But when running npm run production command I got this error:
error in ./resources/assets/sass/main.scss
Module build failed:
#import "compass/css3";
^
File to import not found or unreadable: compass/css3.
Parent style sheet: D:/wamp/www/loverspay/resources/assets/sass/_general.scss
in D:\wamp\www\loverspay\resources\assets\sass\_general.scss (line 1, column 1)
Even I installed compass in the project directory But there is still that problem
What do I do?
If you have compass library installed inside node_modules directory you can try to import it like this:
#import "~compass/css3";
If it's doesn't help you can try to modify sass includePaths config variable (laravel mix has a third option to pass additional config):
mix.sass('resources/assets/sass/main.scss', 'public/main/css', {
includePaths: [path.resolve(__dirname, './relative/path/to/compass')]
});
In my project i use many scss files (more than 100 files).
The file structure is similar to the BEM project.
scss/
--block/block.scss
----/__elem/block__elem.scss
--menu/menu.scss
----/__elem/menu__elem.scss
and etc...
All files compiled to css files with gulp-sass plugin and concatenated to 1 css file app.css
The same folder i have 2 scss files.
_variables.scss - for define custom variables
style.scss - main file (i use that file to import my variables).
scss/
_variables.scss
style.scss
In style.scss file contained import line with variables
#import "utilities/variables";
Yes, all variables is successful define in style.scss file, but how to define my variables for others scss files (for all scss files in folders and subfolders)?
For another files except style.scss in gulp project gives an error message:
out: error sass/menu/menu.scss (Line 5: Undefined variable: "$laptop".)
Thanks in advance.
I solved this problem. Now i just concatenate all scss file with variables and only then connect them to the general css.
Something like this:
sass/**/*.scss + _variables.scss> app.scss > app.css
In order to use
#include box-shadow(0 0 10px black);
you would have to include the "library":
#import "compass/css3";
later in the file, I am including other scss:
#import "sidebar/main";
and in that sidebar/_main.scss, when i call the same:
#include box-shadow(0 0 10px black);
compass breaks with an error:
< ... Undefined mixin 'box-shadow'.>
Does this mean that I'll have to abstract the libraries in my own library file, and then include that file in each and every other scss???
Rename the sidebar/main.scss to sidebar/_main.scss - no other code changes needed.
This instructs sass compiler not to compile the sidebar/main.scss file into a separate css file, but include it in the main scss file.
The process works like this:
sass compiles the main scss file with all inclusions and generates the css (no errors here, since compass is included at top)
sass compiles all other scss files that don't begin with _, but since these don't have compass included, it throws the error.