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?
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'm coming to you because I would like to use the Tabulator http://tabulator.info/ library in a Laravel project. I have correctly installed the library in my project (import of css and js scripts).
Terminal :
npm install tabulator-tables
resources/js/app.js:
window.Tabulator = require('tabulator-tables/dist/js/tabulator.js');
resources/js/app.scss:
#import 'variables';
#import "../../node_modules/tabulator-tables/dist/css/tabulator.min.css";
#import "../../node_modules/tabulator-tables/dist/css/bootstrap/tabulator_bootstrap.min.css";
And to stylize the tables a bit, Tabulator provides a system to use sass variables.
resources/js/_variables.scss:
$backgroundColor:black;
$headerBackgroundColor: #3F3F3F;
$headerTextColor: #fff;
$borderColor:#FFE6;
$rowTextColor: #000000;
$rowSelectedBackground: #FFE6A8;
#import "../../node_modules/tabulator-tables/dist/css/tabulator_simple.min.css";
But as indicated in the documentation http://tabulator.info/docs/4.9/style#sass, it is enough to override the variables used by the library to style the tables. But when I do npm run dev, no changes are made. Would you have an idea ?
Sorry i have noticed that i import the wrong file in resources/scss/app.scss.
//wrong way
#import "../../node_modules/tabulator-tables/dist/css/tabulator.min.css";
//good way
#import "../../node_modules/tabulator-tables/src/scss/tabulator_simple";
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'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";
Using rails 3.1 and less-rails (>= 2.1.1):
Is anyone out there successfully using #import to include local .css.less files? I'm using the following file structure to try to do so:
application.css:
//= require less
less.css.less:
#import "layout"
layout.css.less:
body {
background-color: white;
}
However the contents of layout.css.less never get loaded. I also tried importing "layout.css" and "layout.css.less" to no avail.
I know that less.css.less gets loaded because if I put some css in there, it gets loaded.
I'm using #import to include the layout.css.less file because (ultimately) I'm trying to use the asset helper image-url, and the author of less-rails told me I need to use #import here
UPDATE:
I added a semicolon to the #import statements, and now rather than nothing from the less.css.less file being loaded, I see the #import statements themselves in the loaded stylesheet.
I got this working by renaming the layout.css.less file to layout.less