I'm wondering how to properly import boostrap.scss into WordPress. I think I'm struggling with some absolute / relative path issue: boostrap.scss file has a lot of dependecies and those dependecies have further dependecies.
I've tried to specify a realtive path as
#import "/assets/css/boostrap/namefile.scss"
inside my style.sass file (when it compiles it generates the style.css file, registered and enqueued in the functions.php as WordPress requires) and all over inside the bootstrap .scss files to avoid errors like "File to import not found or unreadable", but it works only for several files (honestly I have no clue about why sometimes this works and sometimes not).
Anyway, either if this method would work (and I think it wouldn't) I want to beleive there's a more efficient solution to work with variables, maps, functions, and mixins inside WordPress.
Any help? Thank you
Related
I have multiple SCSS files that I want to import into one main SCSS file. I want ALL of the contents of that file to be imported, basically copying the entire document into the other one. Currently, I am using #import, which is exactly what I need. But now it has been announced that it will be removed from SCSS, and I'm afraid that #use cannot replicate this functionality that I need. With #use, I can only import selected variables, classes etc., but I want the entire file.
Two possible solutions (that I don't want to go for):
A) Writing everything in the same file. But that would become quite messy. I have one template SCSS file with variables and utility classes (a lot of them), and 3 other files for custom code (so the CSS of a site can be changed by multiple people at the same time, having only one file would limit it to one person at a time)
B) Loading multiple stylesheets on the site. That would be the better option, but that would cause a lot of unnecessary requests on the server.
Any ideas? I'm using SCSS in Wordpress. Will the #import rule be unusable once it's been removed from the language? What if I didn't update the Plugin that compiles the SCSS? It's frustrating because the current #import rule does exactly what I need...
Thank you!
The question is more or less resolved. I was trying to migrate from #import to #use in an environment that does not support the #use rule at all. As I said, I'm using a Wordpress plugin to compile. #use is only available in Dart Sass and upon using it in my setup, the compiler would throw errors, as it is based on phpsass, which does not have #use or #forward and still uses #import. Which make everything a lot easier!
So, I've done making all of my partials at there own folder(like base,abstracts etc) and every folder have there _index.scss where I already #forward all the partials there. Then at the main.scss file, the only thing I needed to do is #use all of my folders' index. But, instead of showing all the results at the css file, it just copies the #use comment from the main sass file, and return with the 'Unknown at rule #use', this makes sense because #use only works for sass not css. But why does the css doesnt translate the #use function from the main sass file, instead it just spit out the exact code block which is " #use 'abstracts' "(for example). Do I need to set-up something besides the sass compiler itself? Like some javascript? Because I dont really have any decent knowledge at Javascript. I hope you can answer my questions, Thank You!!
This is the screenshot, the right side is the css, which suppose to load the sass files,but instead just output the same command which is the #use
I'm trying to have a global .scss file that gets imported into all pages.
I have the following project structure
/src
/pages
index.js
index.module.scss
/templates
/restaurants
/hungry
hungry.js
hungry.module.scss
/styles
typography.scss
variables.scss
/package.json
gatsby-plugin-sass
node-sass
/fonts
...
I tried passing options via gatsby-plugin-sass and also exposing global styles with gatsby-browser.js using this link: Include sass in gatsby globally but no luck.
My typography.scss file
typography.scss
Passing options to gatsby-config.js
My gatsby-config.js file
Error message
Exposing global styles with gatsby-browser.js
gatsby-browser.js
hungry.module.scss
Error message
I've also tried reading the documentation:
https://www.gatsbyjs.com/docs/how-to/styling/global-css/
I'm new to Gatsby and completely out of ideas at this point. I appreciate any help.
Thank you.
The approach of using gatsby-browser.js is perfectly valid and it should work, in addition, your paths look correct to me.
Regarding your typography.scss, it clearly seems that the relative paths are not working, try adding/removing relativity using ../../path/to/fonts or ./path/to/fonts.
Another approach that may work for you, is removing the options from your gatsby-plugin-sass plugin and import it as .scss import to the desired file.
Let's say that you fix the issue with the relative paths in your typography.scss (first step). Once done, your .subtitle class file, you can simply:
#import '../../../styles/fonts/typography.scss' use it. Something like:
#import '../../../styles/fonts/typography.scss
.subtitle{
font-family: $font-medium;
}
So, summarizing. The first step should be to fix the relative font importation and then, import that file directly in the needed .scss files.
Once you comment the manifest plugin (which request a missing asset in the GitHub), it loads the fonts correctly:
Notice the K, quite unique in this typography.
Gatsby uses the path inside /pages folder to build URLs of the pages. You were putting the templates folder inside the /pages folder, causing some weird behavior. Move it outside to fix the issue.
I have the following set up:
d:\modules\base - This is where my CSS framework (Inuit CSS) and site theme lives. The idea is for others to be able to use this as an import into their sites main style.scss and write their own styles on top of this.
d:\sites\my-site - As described above, I will import the module\base into my site.
To do this I use
#import "D:\modules\base\style";
Which works... But for other developers, their module mite be on a different drive, or have a different folder structure. So I was wondering if there was any way to do the following:
#import "$module-path\style";
Then they could set their module path themselves in a config file or something similar.
I appreciate there may be other methods to make this easier, e.g. having it all in the same folder, but would be interested if there was a solution to this method.
Thanks
I managed to get around this by making a directory link in d:\sites\my-site
in CMD, type
mklink /D my-link-name D:\modules\base\stylesheets
this creates a link in the directory your in called "my-link-name" and points it to the module.
Then I just include this in my sites style.scss like so:
#import "my-link-name\style";
Just use a relative path to your import, e.g.:
#import '../../base/style';
I am using bootstrap with Meteor, and importing the bootstrap.less files, which is installed in the public folder, through an import command in main.less:
#import "public/bower_components/bootstrap/less/bootstrap.less";
Below it, I can start using the bootstrap mixins such as .clearfix() and text-hide() and they compile fine.
However, when I want to abstract my own less code into a separate file apply.less and import that file back into main.less, which now looks like this:
#import "public/bower_components/bootstrap/less/bootstrap.less";
#import "apply.less";
I now gets an error
=> Errors prevented startup:
While building the application:
client/less/apply.less:10:2: Less compiler error: .clearfix is undefined
This is really strange. Is this an issue with Meteor?
Another thing I found out - if I put this empty mixin definition
.clearfix(){}
at the top of my apply.less file, things will compile fine again.
Has anyone come across this issue before and figured out a workaround?
Rename your second file as apply.lessimport and import it as:
#import "apply.lessimport";
Basically, the less package looks for every file in the directory tree with a ".less" extension and compiles it to CSS individually, regardless of whether the file is being imported by another file.
When it finds a file with a ".lessimport" extension, it adds it to the list of watched files, but does not actually compile or do anything with it.