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";
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 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
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 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";
In my Compass the top file has lines which include necessary plugins:
#import "compass";
#import "rgbapng";
#import "compass/css3";
#import "config"; // file that has my variables
But during compilation of a file that has #include border-radius($box-radius-small); errors out saying Undefined mixin 'border-radius' and Undefined variable: "$box-radius-small". - both of which should be included already!
Can anyone please help with this issue?
PS my packages are:
Compass 0.12.2 (Alnilam)
Sass 3.2.7 (Media Mark)
Just place the following import at the top of your scss file
#import "compass/css3";
Features of css3 :: http://compass-style.org/examples/compass/css3/
There are many other imports available out there...and you can create your own if you find yourself re-using blocks of css often enough to warrant the extra effort.
Try to #import "compass" and your "config" variable sheet in every stylesheet that uses the mixins or variables.