We are using Gulp with Zurb Foundation SASS part of our front end development workflow. In our main.scss file, we are importing the _settings.scss file from Foundation to customize the variables. The main.scss file lives outside of the Foundation SASS directory forcing us to pull it in as follows:
#import '../../../../../frameworks/foundation/sg/scss/settings';
As you can see, we have to back out of the working directory (a Wordpress Theme directory), then back into the Foundation SASS directory.
How can we minimize that path either though Gulp or some other SASS configuration file? Is there a way to set base paths somehow, or is this the desired behavior for Gulp and SASS?
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';
I have downloaded a free HTML theme.
If I open index.html file of the theme in the browser it works perfectly.
However, now I need to integrate this theme in my Laravel Application. If I inspect element in the index.html file loaded in the browser, I can see that some .scss files are getting called.
The scss folder is present in the theme folder but I really don't know how to include this into my project
You can think of SASS as high level css which provides you with more features like making variable and easier css syntax etc ... but since browsers doesn't understands SASS you have to compile SASS into CSS there are multiple ways to do that.
First if your theme folder already has complied SASS (CSS Folder) you can use it if not and want to integrate with Laravel please follow these steps
Copy everything in your SASS Folder and place it in "/resources/assets/sass" so
they can be found by Laravel to be compiled
now you have to compile SASS into css you can use gulp manually or make use of
Laravel mix which is already implemented for you by Laravel
Laravel Ships with packages.json file you will find that in your app root
directory so before being able to compile SASS you have to run npm install in
your root directory (make sure that you have npm and node installed)
after running npm install now you can run either one of these to compile any
sass files you have in "resources/assets/sass"
npm run dev //this will compile one time only
npm run watch //this will automatically watch for any changes and compile
Now your sass files should have been compiled to css you can find the compiled css files in your "public/css" folder.
Hopefully you found this helpful you can read more about this in Laravel docs frontend section specifically Laravel Mix here
Laravel has a file called webpack.mix.js where you edit all frontend assets compilation by calling the mix.js/sass with the respective arguments. It is located at the root of the project.
1- In the resources folders create a new folder and call it scss with a app.scss file. The complete tree will be scss/app.scss
2- Go to the webpack.mix.js and add a new line: mix.sass('resources/sass/app.scss', 'public/css');. The first argument of the method is the source file, and the second is the destination folder.
3- In the app.scss file import all the theme scss files using #import 'file/source';
4- Open terminal/cmd in your Laravel project folder and Run npm run dev/watch to compiled your scss file, and at end your css file result will be located in public/css/app.css.
5- Import the app.css into your Html head section and reload the page. If the styles do not work, press ctrl + f5 to clean browser cache.
The latest version of Laravel utilizes a tool called Vite as a replacement for Laravel Mix.
In order to use Sass with Vite, make sure that Vite and Sass are installed run npm install and npm add -D sass
Make sure you have a sass or scss folder in your projects resources directory, and an scss file inside like app.scss
Make sure that you have configured vite.config.js (which can be found in a new Laravel projects root directory) to include an entry point for sass like so, utilizing the correct path and name for the folder you made:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/scss/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
And in your Blade files add the following, again making sure to use the correct path for the folder you made:
#vite(['resources/scss/app.scss', 'resources/js/app.js'])
Then you can build your sass using Vite by running npm run build
I'm working on a drupal project using SASS and Compass. I would like to use compass mixins like:
#include transition-property(width);
#include transition-duration(2s);
But when I try to #import 'compass/css3'; at the top of my scss file, it does not work. I guess this is because _css3.scss file is not in my drupal theme's scss folder. It's in systems (ubuntu) /var/lib/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass folder.
How should I include compass/css3?
Should I edit the config.rb file?
What will happen if another developer works on this project who has their compass _css3.scss file in a different location? Will they need to edit their local config.rb file or scss files?
Iam trying SassyStudio für Visual Studio to compile the SASS in our project - but there area some issues.
The project is structured like this:
Solution
- Project 1
-- Areas
--- Area 1
---- Styles
----- style.scss
------ style.css
--- Area 2
---- Styles
----- style.scss
------ style.css
-- Styles
--- globalstyle.scss
---- glogalstyle.css
As you can see the scss files are scattered all around the project. The css Files should be compiled beside the scss files. Since there are compass references within the scss files there are dependencies to compass.
Mindscape Web Workbench is not designed to work like this.
I installed Ruby + gem sass + gem compass and
sass --watch C:/compasstest:C:/compasstest --compass
works well. But I dont like to start a batch everytime I start developing.
So I found SassyStudio an it pretty looks like what I need. But there are some issues with the compass references. In the options I entered "C:\Program Files (x86)\Ruby193\bin" to Ruby Install Path and "C:\compass" to the Include Paths property. The Compass Folder contains for example the "compass/css3" structure from github.
12:00:52.447 : Failed to compile css.
[SassCompileException]c:\compass/compass/css3/shared:1: error: file to import not found or unreadable: "compass/support"
at NSass.SassCompiler.CompileFile(String inputPath, OutputStyle outputStyle, Boolean sourceComments, IEnumerable`1 additionalIncludePaths)
at SassyStudio.Integration.LibSass.NSassDocumentCompiler.Compile(FileInfo source, FileInfo output)
at SassyStudio.Editor.GenerateCssOnSave.GenerateCss(DateTime time, String path)
12:00:52.447 : Compile complete.
What exactly is Ruby Install Path for?
Do I need the config.rb even if I dont want so specifiy specifiy sass and css folder?
How can I tell SassyStudio to find the file compass/support (It already found compass/shared as we can see)?
OK, so the sass --compass is new to me, so I don't know if I can comment on that.
Here is what you want to do.
First, change your ruby path to this C:\Program Files (x86)\Ruby193 as you don't need the bin directory in there (and not sure if it would cause issue or not).
Next, for me to detect that you are using compass (vs sass gem), I look for the config.rb file, and I believe that compass requires this to work as well, but not exactly sure on that. For me though, I definitely need it.
Now, what happens when you save a file is that I go looking for that config.rb from the current directory upward, so I believe that you can achieve what you are wanting to do through the use of multiple compass.rb files. So, that means if you put one in Area 1, one in Area 2, and one in Styles, I think it will work (but I've never tried).
I'm a bit unfamiliar with the syntax of compass.rb but I'm sure you will be able to figure out something that works there. That file may need to go into the Styles folder instead of root folders, I don't remember for sure (I think styles is perhaps configured in config.rb).
Let me know if you need anymore help.
I'm pretty new to SASS/SCSS and got a git project with CSS Files in the main directory which shall import partials from a subdirectory. I was wondering if it's possible to install sass on the server, create a compass project so that css files will be created automatically after a live edit of the scss files on the server? Or does it have to be local with a filewatcher? I already tried to set up a compass project on the server but no css files were created automatically. Was it because of wrong settings or is it just not possible this way?
If it's possible is there a good step by step tutorial? I already found this
Maybe the problem is the path. In my config.rb I changed the path without knowing what to write in the string if sass and css directory are the same as project path. Didn't work with "/" or an empty string.
Both Sass and Compass provide watch commands. You can use either:
sass --watch input.scss:output.css (options)
or, assuming you've got your Compass config file correctly setting your css_dir vairable:
compass watch
Either of those should recompile the css file upon changes. If you want this done live on the server, you'll need to execute the watch command on the server.
To add a point to #aerook's answer,
In your projects you may have multiple scss and css files. In which case you may use the following to watch the entire scss directory to make changes in the css directory
sass --watch scss:css
PS : scss and css are folder names in the same directory path.