I have managed to configure and get working bourbon with webpack. I just included the following on sass loader
&includePaths[]=' + bbPath
In a SCSS file I just do
#import "bourbon";
I now its working because I am calling mixins via scss files and I see the output, also webpack doesn't complain.
Problem is that in WebStorm IDE it states that the above #import line that bourbon cannot be resolved.
I tried doing
#import "~bourbon";
which makes WebStorm happy but the webpack fails with
Module build failed:
var path = require('path');
^
Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
in /Users/test/node_modules/bourbon/index.js (line 1, column 1)
maybe the fault here is WebStorm, is there some way to force WebStorm to understand that the #import bourbon is valid ?
I believe you can control the path of all scss files by telling Webstorm of the Root Resource Path.
WebStorm File Menu --> Preferences --> Directories --> Right click on your node_modules directory and check Resource Root option.
Once this is set then WebStorm IDE will know of your import #'bla-bla' files.
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';
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?
I'm trying to learn laravel and set up a new project with composer on Windows 10
if I try to compile the
resources\assets\sass\app.scss
I got the following error
Compilation Error
Error: File "c:\Users\Michael\www\demolaravel\resources\assets\sass\node_modules\bootstrap-sass\assets\stylesheets\bootstrap" not found
on line 9 of sass/c:\Users\Michael\www\demolaravel\resources\assets\sass\app.scss
>> #import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
why he complains about that dir - also the app.css (at least this particular line) is original. It's the way composer installs it.
// Fonts
#import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
body{
padding-top: 80px;
}
I just added the body selector at the end
I work with visual studio code and the live sass compiler extension. But I also tried Scout-App
also tried puting the absolute path but nothing works :(
It seems you didn't installed all your node dependencies.
Run this command npm install on your project.
the #import
write like this
#import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
compile new css with npm run dev
First make sure you have installed node and npm globally. Then delete the node_modules directory from you project, and run
npm rebuild node-sass
This command may take some times to execute. After that go to your project directory and run npm install. Then compile your assets with laravel-mix.
I also faced the the same problem in linux environment and I have come across with this solution.
I've been trying for some hours to make WebStorm's Compass watcher compile my .scss files, but it fails and I can't understand why.
I'm creating an empty test project with WebStorm and after that run
compass create
and get an error from the watcher about screen.scss that it can't find 'compass'
error sass/screen.scss (Line 6: File to import not found or unreadable: compass/reset.
I tried a couple of solutions which didn't work for me:
created a symlink from
C:\Ruby23\lib\ruby\gems\2.3.0\gems\compass-1.0.3\bin\compass
to my sass folder;
added the compass directory as a resource in the project
File->Settings->Directories;
re-installed compass.
The config.rb settings are the default ones:
These are my watcher's settings, I will provide other information if needed
I have installed singularity with bower, and am using prepros as a compiler.
Attempting to compile my .scss file returns the following error:
File to import not found or unreadable: singularitygs
At the top of my styles.scss file:
#import "compass/reset";
#import "singularitygs";
config.rb:
require 'singularitygs'
relative_assets = true
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
Additional info (that might be relevant): I am only 'watching' my public folder with Prepros, so config.rb file is at the root of that folder.
Anyone know what the problem may be?
I have now got this working with the following steps:
► Install Ruby gems on my system, and installed singularity
using gems on the command line with:
gems install singularity
► Set Prepros to use system Ruby Installation (as opposed to built-in version) by going to Prepros Options -> Advanced Options -> Use Custom Ruby. (just enter 'ruby' if it's already in your path)
► Import compass, then singularity and breakpoint (the latter needed for responsive grids) in .scss file using:
#import "compass";
#import "singularitygs";
#import "breakpoint";
► Add config.rb file in project root and include the line:
require 'singularitygs'
Now it's all working sweet!