I started to organize my sass code into folders. I initially started with main.scss and my folder structure is as follows:
I was able to successfully cut and paste the variables into the abstracts/_variables.scss file and the base code into the base/_base.scss file and I have imported them like so into my main.scss:
#import 'abstracts/functions';
#import 'abstracts/mixins';
#import 'abstracts/variables';
#import 'base/animations';
#import 'base/base';
#import 'base/typography';
#import 'base/utilities';
#import 'components/button';
#import 'pages/home';
The rest of them however, do not successfully import. I am wondering if there is an issue with my node-sass script:
"scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css -w"
},
Not sure why two of my sass files import successfully and the rest will not.
Lets try this, I know that version 4.5.3 does work if you are setting this up correctly. So, please uninstall node-sass with:
npm uninstall node-sass --save-dev
Then install version 4.5.3 with;
npm install node-sass#4.5.3 --save-dev
Related
Here is my main.scss file with all my imports...
#import "abstracts/functions";
#import "abstracts/mixins";
#import "abstracts/variables";
#import "base/animations";
#import "base/base";
#import "base/typography";
#import "base/utilities";
#import "components/bg-video";
#import "components/button";
#import "components/cards";
#import "components/composition";
#import "components/feature-box";
#import "components/form";
#import "components/story";
#import "layout/footer";
#import "layout/grid";
#import "layout/header";
#import "layout/navigation";
#import "pages/home";
I started having this issue after creating the #import "layout/navigation" file in my layout folder. It seems nothing is reloading automatically unless i do a manual save in the main.scss which contains the #imports it only then updates. I downloaded the live sass compiler aswell as the sass extensions on vs code and closed out of the live server and terminal i had everything running on. i then started using those extensions and the integrated terminal in vs code.... I checked to see if node and npm was still installed and if i do node-v and npm-v to check that its installed i get node version v14.15.3 and npm version 6.14.9. i tried to reinstal node-sass using npm install -g node-sass command in the terminal and i get a permission denied error... The site is also now just totally unresponsive, nothing that was clickable can be clicked and nothing is changing on the page if i change it in a file. I have no idea how to fix this please help.
Add the '_' in front of scss files. and check in VS Code.
/scss
main.scss
layout/_header.scss
layout/_footer.scss
It seems to be auto reloading now. i deleted all the package.json, module files and reinstalled node-sass and set up a new live server in the terminal. The only other problem is that none of the animations for the buttons and pictures are working for some reason i had two css stylesheets that appeared to be identical one named style.css and one named main.css both located in the css folder heres my package.json script "scripts": { "compile:sass": "node-sass sass/main.scss css/style.css -w" }, So i deleted the main.css file and the one labeled main.css.map
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'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 just installed susy via npm but don't know how to include it in the main scss file. How can I import susy?
I've tried:
#import "icons";
#import "nav";
#import "page_home";
#import "../../../susy";
where susy is in /node_modules and main.scss is in /app/style/sass
Your path goes up to the root directory, but doesn't then go down into the node_modules/susy/ directory.
Try updating #import to something like:
#import "../../../node_modules/susy/sass/_susy.scss
When you import a file you don't need to include the file extension _ or .scss. Sass is smart and will figure it out for you.
#import "../../../node_modules/susy/sass/susy";
I have a burbon running on code kit. It is not problem, I cant get neat running?
when i put
#import "neat";
I get this error
Syntax error: File to import not found or unreadable: neat.
Load paths:
/
/Applications/CodeKit.app/Contents/Resources/engines/bourbon/bourbon/app/assets/stylesheets
on line 13 of /Applications/MAMP/htdocs/dev.wordpress/wp-content/themes/blankslate/style.scss
Use --trace for backtrace.
Since CodeKit version 1.8, Neat is built in. You don't need to install anything, just write this in your SASS/SCSS file:
#import "bourbon", "neat";
Make sure your 'Neat' folder is inside your stylesheets folder and use #import "neat/neat";
directory example:
[sitename] > [assets] > [css] > styles.css, [sass] > _main.sass, styles.sass, [neat]
Neat is a framework on top of Bourbon, so it does not automaticaly come with Bourbon.
Install Neat as following.
In Terminal:
gem install neat
Then cd to your Sass directory and run:
neat install
In your Sass file:
#import "neat/neat";
You also need to do:
#import "bourbon/bourbon";
before:
#import "neat/neat";
so your final scss file should start with(in the same order):
#import "bourbon/bourbon";
#import "neat/neat";