I'm trying to run some tasks on my project with grunt, but for some reason I'm having an error pop up when running a sass task.
This is the error I'm receiving:
Running "sass:dist" (sass) task
Syntax error: File to import not found or unreadable: settings.
Load paths:
/Users/x/Desktop/WordPress/wp-content/themes/theme
/Users/x/Desktop/WordPress/wp-content/themes/theme/bower_components/foundation/scss
/Users/x/Desktop/WordPress/wp-content/themes/theme/sass
/Users/x/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/compass-0.12.7/frameworks/blueprint/stylesheets
/Users/x/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/compass-0.12.7/frameworks/compass/stylesheets
Compass::SpriteImporter
on line 6 of assets/sass/app.scss
Use --trace for backtrace.
My folders look like this, if it's of any help:
And my .scss file like this:
#import "normalize";
#import "settings";
#import "compass/css3";
#import "compass/css3/transform";
#import "compass/utilities";
It seems to #import normalize just fine, it's just having a problem with the settings file.
Any help with this is appreciated. Thanks in advance!
Normalize is a folder above settings. Did you try #import "foundation/settings";
Related
I'm learning SCSS following a freecodecamp tutorial, but I keep getting the following error on the CLI for live sass: watch:
Error: Undefined mixin.
╷
320 │ #include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_variables.scss 320:1 #use
node_modules\bootstrap\scss\bootstrap.scss 11:1 #import
scss\_custom.scss 58:8 #use
scss\style.scss 1:1
Could anyone that is more experienced in SASS point me in the right direction, I have no idea what to do from here. Do I need to add imports our #use to the custom.scss?
I had this problem. My issue was that I was importing in the wrong order:
#import '../node_modules/bootstrap/scss/mixins';
#import '../node_modules/bootstrap/scss/functions';
#import '../node_modules/bootstrap/scss/variables';
I got rid of it by changing it to
#import '../node_modules/bootstrap/scss/functions';
#import '../node_modules/bootstrap/scss/variables';
#import '../node_modules/bootstrap/scss/mixins';
You need these three imports in this specific order. You are probably missing one of the imports or wrote it in the wrong order too.
I just ran into this issue. You also need to include functions.css.
https://github.com/twbs/bootstrap/issues/23451
I am practicing sass in my code editor. When I tried to compile my sass file and built a watcher. I receive:
Jiatongs-MacBook-Pro:6_myLandingPage_starter jiatongli$ sass --watch sass:css
Error: Undefined variable.
background-color: $white
^^^^^^
sass/modules/_navbar.sass 3:21 #import
sass/modules/_modules-dir.sass 1:9 #import
sass/app.sass 3:9 root stylesheet
Because I cannoStackOverflow files here on stackoverflow, I link my github repository which is:
https://github.com/riederleeDEV/SASS-project.git.
It seems like the sass watcher cannot capture my file import and I do
not know where went wrong
Here is the command I used: sass --watch SASS:CSS(the command should not have any error)
After I checked the file, I discovered that there is nothing wrong with my app.sass import nor the typo. Just want to ask where I went wrong?
Try this:
<···· Move variables to top
#import "base/base-dir" |
#import "layout/layout-dir" |
#import "modules/modules-dir" |
|
#import "variables" ············
#import "mixins.sass"
I have this structure of SCSS:
app
styles.scss
bower_components
_colors.scss
_fonts.scss
sass
index.scss
styles.scss:
#import "sass/index";
index.scss:
#import "bower_components/_colors";
#import "bower_components/_fonts";
app folder is set as working directory in File Watcher settings and is marked as "Resource Root" in WebStorm. However, transpiling fails with error:
error sass/index.scss (Line 3: File to import not found or unreadable: bower_components/_colors.)
I've read that #imports evaluated in SCSS
relative to current file location
relative to root location
But in my case it is obvious that Ruby transpiler doesn't do attempt to find files relative to root location. Is it a bug? Or I am doing something wrong?
I installed SCSS through Ruby and set up File Watcher according to https://www.jetbrains.com/help/webstorm/2016.1/transpiling-sass-less-and-scss-to-css.html
This is my File Watcher settings:
You will get exactly the same issue when running scss.bat in command line:
C:\Projects\prj>cd app
C:\Projects\prj\app>C:/Ruby193/bin/scss.bat --no-cache --update sass/index.scss
error sass/index.scss (Line 1: File to import not found or unreadable: bower_components/_colors.)
See https://github.com/sass/sass/issues/652: current working directory being automatically placed on the Sass load path is deprecated in 3.3. You need passing the load path explicitly with -I option to work with folders relative to the working directory. Like:
Hi everybody I'm new to learning Gulp and I can't seem to get over this hurdle. I am trying to compile my sass and I will set it to gulp-watch. It will work fine for a little while, but then it will show an error- the file is not found or unreadable.It looks something like:
events.js:154
throw er;// Unhandled 'error' event
Error: app/scss/main.sass
Error: File to import not found or unreadable: layout1
Parent style sheet: stdin on line 2 of stdin
I have tried to look on this site for the solution to my problem and I thought putting the includePaths would work (maybe I'm doing it wrong) but I'm still getting errors. Could someone please help me out?Here are some images of my project. Here is a link to some pictures: http://imgur.com/a/pQBHV
Looks like there are a few issues:
1) You should probably use the scss extension with all your files and update the sass task in your gulp file to watch for changes like so: gulp.src('app/scss/*.scss') or since, in theory, all files contained in that folder should be sass, you could do this instead: gulp.src('app/scss/*') which will watch all the files in the directory.
2) There's also an issue with the names of your sass files. You need to prepend the files you wish to import with an underscore so the compiler knows these files are partials.
So your sass files should look like:
_layout1.scss
main.scss
_normalize.scss
_styles.scss
And import the partials in main.scss:
#import 'normalize';
#import 'layout1';
#import 'styles';
More info http://sass-lang.com/guide#topic-4
I am using rails 3.1 rc6 and I have 2 files:
screen.css.sass
partials/_layout.css.sass
Screen 1, looks like this:
#import 'compass'
#include global-reset
#include reset-html5
#import "partials/utilities"
#import "partials/layout"
In _layout.css.sass which is a partial that I am importing from screen.css.sass, I want to use the pie-clearfix mixin which lives in:
compass/utilities/general/clearfix
I would have thought that I would not have to add an additional #import directive to the partial because I am importing the whole compass library in screen.css.sass.
But when I try to use it like this:
.group
#include pie-clearfix
I get the following error message:
Undefined mixin 'pie-clearfix'
The only way to get the _layout.css.sass file to render from the asset pipeline is to add the import to the _layout.css.sass:
#import "compass/utilities/general/clearfix"
It does not seem to be picking up the #import 'compass' from screen.css.sass.
Am I missing something or is this a bug?