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.
Related
I have bit knowledge about how to compile scss file using npm run dev.
But now I have Bootstrap html theme folder where all assets files are included like scss and css . i am confused that is i have to #import all bootstrap theme folder scss files name in laravel app.scss file for compile or just copy Bootstrap theme folder scss files and paste on laravel assets/scss folder and run command npm run dev. please help thanks
In your resources/sass/app.scss file or any other file you want to have the theme files included, add the following line of code
#import '~bootstrap/scss/bootstrap';
This line of code includes all bootstrap scss files that can be found in the node_modules/bootstrap/scss/bootstrap folder. If you have a custom directory for your scss files you can include them like this
#import 'custom_folder/bootstrap-saa/assets/stylesheets/bootstrap";
Do not forget to add the entry into your webpack.mix.js file in your root folder.
mix.sass('resources/sass/app.scss', 'public/css');
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've added a new .scss file to my components directory in Zen. Compass sees the file, because I get the message 'file modified' but I do not get a .css file generated
I'm new to compass and sass. Do I need to map files somewhere?
I found my answer. I needed to include the new scss in my styles.scss file.
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.