meteorjs scss #import chain - meteor

I'm writing a package with meteorjs and I use fourseven:scss and materializecss (scss version);
the folder structure of styles folder is the following:
|-- main.scss
|-- materialize
|-- materialize.scss
|-- components
| |-- prefixer.scss
| |-- (all others materialize css' components)
|-- myPlugin
|-- myPlugin.scss
main.scss uses
#import "materialize/materialize";
#import "myPlugin/myPlugin";
and myPlugin.scss uses
#import "../materialize/materialize";
but the app crashes on startup saying that components/prefixer file is not found (the source of error is the file myPlugin/myPlugin.scss);
If I put all css files in the same folder, I can get everything work but I'd like to keep things structured; does someone have some suggestions about how to solve this?

There is a problem with certain versions of that plugin if you follow this discussion it will lend some insight: https://github.com/meteoric/ionic-sass/issues/16
Try setting specific version of the package...
meteor add fourseven:scss#=3.2.0
And/Or, a fix I've been using for ages it seems is to comment out the problem includes until first build, and afterwords you can uncomment it and the build should work.

Related

CSS #import "~materlize-css" | Using Webpack | No style being made

I'm using Sage, a WordPress framework, and it lets you choose during creation some css frameworks, but I want to use Materialize CSS instead.
It uses Webpack to build and combine the .scss files into one. I did an npm install materialize-css so it's in my node_modules. In my project structure, I made an scss file that's used to import the module basically.
I also have bulma in this build, included via the original creation, so I can try to see how the structure is setup. It uses the following import statement:
#import "~bulma";
This works. I'm so confused about how this works. I think the ~ (tilde) tells Webpack something, but I don't know what. What I figured is that Webpacks checks the package.json file or something and finds it in the node_modules.
I've tried #import "~materialize-css"; with no luck.
Can someone explain what the heck Webpack is doing? Haha, because I can't find any documentation on this.
Here are the node_module folder structures, maybe this has something to do with it:
Perhaps the root of Bulma is bulma.sass yet for Materialize-CSS, there's no file, it's in sass/materialize.scss.
If needed, here's the github for the Sage framework, the webpack.config.js is in the build folder: https://github.com/roots/sage/tree/master/resources/assets
You have to specific the file you want to import also like this
#import "~bootstrap/scss/bootstrap";
#import "~font-awesome/scss/font-awesome";
#import "~toastr/toastr";

Best practices for moving css styles into Sass files

Our current Angular 4 project currently uses pure Css, however I am recommending the use of SASS. I am going with the VSCode IDE and the Live-Sass-Compiler extension (so far working quite well), and webpack is used to bundle the current "..\src\styles.css" file.
I have moved some 800+ lines from styles.css into _base.scss (as is), and my new sass folder structure I've created is:
src
sass
_base.scss
_variables.scss
main.scss
Where main.scss looks like:
#import "_variables.scss";
#import "_base.scss";
My primary question is two-folder: what is the best practice for refactoring all of this styling into my new main.scss file ? And should I create new sass variables in _varialbes.scss and use them inside _base.scss ?
If my question is too broad, I will try and narrow it down.
regards.
You can use new variables on _base.scss if you "#import _variables.scss";.
And you don't need to use _ when you importing scss files _ just means partial.
you can import your scss files without _ this.
#import "variables.scss";
#import "base.scss";
Here is the some best practices link

Where to put fonts using SCSS 7-1 architecture?

I am currently restructuring my project using the 7-1 architecture as proposed in https://sass-guidelin.es/#architecture.
Now, i am using flaticons in my project. Where in the structure should i put the folder and scss file provided by flaticon, and where should i import it?
The 7-1 pattern lists the following sub-directories along with main.scss:
./
base/
components/
layout/
pages/
themes/
abstracts/
vendors/
main.scss
Where to place external library/framework scss
The vendors folder is meant for SCSS of external libraries/frameworks like _flaticons.scss
If flaticons is a directory with many things rather than a single file, then you can just place the whole flaticons directory in the vendor's folder.
Import
In main.scss in the sass-root directory: #import 'vendors/flaticons';
or the following if your stuff is in a directory: #import 'vendors/flaticons-directory/flaticons-main-file'
Be mindful of the ordering of imports in main.scss because it's possible to define general variables and mixins in one file, and refer to them in other files, so the files that define them must be imported before the files that use them.
Additionally, the SASS will be compiled to CSS rules in the same order that they are imported, so the normal inheritance / cascading will apply to the compiled CSS rules.

Bootstrap 3 and Less together

I wanted to use Bootstrap 3 and Less together. Here is what I did:
installed Node.js
installed Less using npm
downloaded bootstrap source (in a different directory than my project's directory)
copied the entire '/less' subfolder to my project's working directory.
created my custom .less file (e.g. styles.less) and included the following:
#import '../less/bootstrap.less';
#import '../less/utilities.less';
compiled in the Node command prompt using: ' lessc styles.less > styles.css '
My question:
Do I now need to only include the compiled styles.css file with my project or do I have to include all the bootstrap components as well?
Also, is this workflow recommended? (I actually read something similar in a smashingmagazine.com article).
PS: Apologies in advance for this silly (I think) question.
Thanks!
If you used
#import "bootstrap.less";
..inside your main less file, then the bootstrap.less will be included during compiletime and will be inside your compiled styles.css.
After your styles.css has been compiled, you only need to include this file into your project.
PS. Also take a look inside your styles.css file, to see what has been compiled inside there. Or play around yourself/experiment. For example, create 2 different less files, #import them inside your main.less, compile and see what happens.

How to properly incorporate Zurb Foundation & Compass to configure SASS variables for a Wordpress theme?

I have been using foundation to develop a Wordpress theme by creating a custom build on the website and including the required files in my theme.
The theme structure (simplified) is so:
Theme Root
|-- 404.php
|-- _
| |-- inc
| | |-- css
| | | |
| | | `-- foundation.min.css
| | |-- images
| `-- js
| |-- foundation.min.js
| `-- modernizr.js
|-- theme.css
|-- theme.scss
My issue is that I would like to customise the SCSS variables, e.g.:
/* Background color for the top bar */
$topbar-bg: #111;
And have tried to include the necessary components:
#import "foundation/components/topbar";
$include-html-top-bar-classes: $include-html-classes;
Clearly it isn't finding the classes as there is no compass project or appropriate SCSS files to import/include, so this is where my question comes in.
I've installed the foundation gem, and am able to create a new Compass project, but I'm just wondering how to structure things and setup/update my Wordpress theme as a Compass project so I can set the variables in _settings.scss?
I'm just a bit confused as to how the 'foundation' way would be to go about incorporating it into a Wordpress theme so that I can customise the necessary SCSS variables while maintaining a standard Wordpress theme structure?
Depending on what level of integration you're looking for you need to create the foundation project in your theme's template directory. I use Foundation 4, SCSS & SMACSS mostly and here's a quick CL snippet I have for this:
compass create templatename -r zurb-foundation --using foundation; cd templatename/sass; mkdir {functions,layouts,mixins,modules,vendor}; open ../;
Now, that said if the theme is already in existence you will want to create templatename with . as it means use the folder you're in already. I don't have a good CL way to do Foundation 5 yet because most of my projects rely on IE compatibility still. Hopefully this gets you going in the right direction, but with the compass create you'll be able to use watch & compile and import different things.
Also, if you're interested in SMACSS (which is awesome) check out http://smacss.com

Resources