I'm trying to compile many Sass files using this Grunt plugin, but I'm having a problem when a file have a rule like this:
.my-icon {
content: "\\";
}
The problem here is the use of "\".
In my project the Sass file that have this code import other files using #import and it is imported by other files too.
I don't know why but when the Sass has this type of rule the #import does not work.
Related
I have been struggling with gulp to compile scss files into css.
I havn't used gulp and sass very much and the docs of this particular framework are not helpful on this matter.
My gulpfile looks like this
var gulp = require('gulp');
var sass = require('gulp-sass');
var scssFile='assets/scss/bootstrap-material-design.scss';
gulp.task('sass', function () {
return gulp.src(scssFile)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('_site/assets/css'));
});
I did npm install gulp gulp-sass --save-dev to install libraries.
And I copied the content of this folder https://github.com/FezVrasta/bootstrap-material-design/tree/master/scss into a folder named "scss"
Now running gulp sass gives me this error:
[13:54:37] Using gulpfile ~/workspace/imb4/gulpfile.js
[13:54:37] Starting 'sass'...
Error in plugin "sass"
Message:
assets/scss/_variables.scss
Error: File to import not found or unreadable: ~bootstrap/scss/functions.
on line 56 of assets/scss/_variables.scss
from line 2 of assets/scss/_core.scss
from line 3 of assets/scss/bootstrap-material-design.scss
>> #import "~bootstrap/scss/functions"; // from bootstrap node_module
^
[13:54:37] Finished 'sass' after 50 ms
Is this because I copied the wrong scss folder ?
Do I need to npm install bootstrap-material-design#4.1.1?
(I did try that, but I can't require() it because it needs jQuery or something.)
Do I need to reference the scss files that are in the node_modules?
The error says it needs a bootstrap folder, do I need to download bootstrap scss files manually and copy them in the folder? Do I have to do npm install bootstrap?
It's probably a stupid question, but I'm already stuck on this for hours now.
Clone the folder in the link as is to your assets/scss
Your gulpfile should call your main entry sass file style.scss - in your case "bootstrap-material-design.scss"
this sass file contains only one import - #import "core";
_core imports _variables.scss, _mixins.scss etc...
your _variables.scss file has
#import "~bootstrap/scss/functions"; // from bootstrap node_module
#import "~bootstrap/scss/variables"; // from bootstrap node_module
So its looking for a node_modules/bootstrap folder,
npm install bootstrap
will add it.
when you run your gulp task and the sass starts compiling it needs the full bootstrap files located in node_modules/bootstrap/scss/ folder to compile correctly.
your "bootstrap-material-design.scss" will first import _core, _core will then import _variables, _variables imports a few custom files from another variables folder within the scss directory before looking at your node_modules folder (on line 56) with #import "~bootstrap/scss/functions";
your gulp task will pick up your sass files references (anything with an underscore is compiled at build time) - That spits out a plain css file where ever you set the destination to be eg "assets/css/style.css" which is the file you should reference in your html after build.
if this is still not happening for you you may just have a simple path issue to resolve. bootstrap versions can differ on sass fodler structure so double check your path in node_modules/bootstrap/scss/ actually has a functions folder.
If it does try #import "./node_modules/bootstrap/functions";
If it does not then you may need to check your version of bootstrap.
Eg - with bootstrap 4.1.1 they are imports not folders
#import '~bootstrap/scss/_functions';
#import '~bootstrap/scss/_variables';
Im using Codekit to compile my sass, and Im splitting parts of my website into individual sass files so when it comes to editing I can easily find the file I'm looking for, But I've noticed that when I edit an import I have to go back to the main.sass style sheet and re-save so that it recompiles my changes, my question is, is their a way to automatically compile my main.sass file upon edit of an import ?
Main.sass
#import 'scss_files/_styles.sass'
#import 'scss_files/_service.sass'
#import 'scss_files/_outsource.sass'
#import 'scss_files/_branding.sass'
#import 'scss_files/_wordsearch.sass'
Maybe there is an error. Try to remove the file extensions of your imports (.sass) because in sass there is no need to include the file extension if you are importing a file
I just started with materialize but now I'm faced with a problem.
When I want to use: #media #{$small-and-up} { media query in my own scss file I get the following error: Error: Undefined variable: "$medium-and-up". While I'm importing the materialize.css file which is compiled from /sass/materialized.scss.
So my question is how can I use the variables / media querys in my own scss file?
I compile the scss by the file watcher plug-in in PHPStorm or by sass compiler installed in command prompt windows.
I hope someone can help me.
SASS variables don't exist in compiled CSS files. If you want to use variables defined in materialized.scss in your own SCSS stylesheet, you need to insert #import "sass/materialized.scss" in your stylesheet.
Incidentally, if you do this, you probably won't need to compile materialized.scss any more. Just compile your SCSS stylesheet, which, because of the #import statement, will pull in materialized.scss.
UPDATE:
After reviewing code at https://github.com/SuperDJ/dsuper/blob/master/private/admin/css/sass/opening.scss, it seems the problem is with this line:
#import url(/private/admin/css/material/sass/materialize.scss);
This is not valid syntax in SCSS. It should be:
#import "../material/sass/materialize";
I have a scss file in which I do not want sass to process an #import statement as it will be processed by this postcss module https://github.com/postcss/postcss-import
How can I do this using gulp-sass?
You simply can't. Sass will compile #import “some.css” to #import url(....css);
Why don't you use Postcss (and neccessary plugins) to compile your .scss file and that way postcss-import can deal with the #import.
I am using Compass to compile .scss files to .css files. I have a file called app.scss which I want to compile to foundation.css.
The problem is that I can't simply rename app.scss to foundation.scss because I end up with a circular import error (app.scss includes the following line: #import "foundation";).
Is there a way for Compass to rename app.scss to foundation.css during the compiling.
Thanks.
The easiest would be to change app.scss to _app.scss, and then have a foundation.scss that does nothing but import the _app.scss.