I have a client folder containing a main.scss, and a folder called home with a home.scss inside of it:
|client(directory)
|----home(directory)
|--------home.scss
|----main.scss
I read in Meteor doc main.* are load before else files. But my home.scss is override by main.scss, as if main.scss is loaded after... why?
Because main.scss load last, and it's "Cascading Style", so the last styles always override the same (if you have) before.
Related
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'm working on a custom theme for my local WordPress site. I've set up a File Watcher in PhpStorm that compiles my scss files in myTheme/scss/ to myTheme/style.css.
This works as intended, the variables which I've declared in _variables.scss are able to be used in style.css or any file imported after it.
My problem now is that the #import '~foundation-sites/dist/css/foundation.min.css'; is being compiled as #import '~foundation-sites/dist/css/foundation.min.css'; instead of the actual css content.
I've tried using #import '../node_modules/foundation-sites/dist/css/foundation.min.css'; instead but this compiles the same way.
What am I doing wrong?
.css extension in import statement tells the compiler to generate plain CSS import instead of pulling the contents in; see https://github.com/sass/sass/issues/556#issuecomment-397771726 for reference.
I'd suggest changing your import to
#import '../node_modules/foundation-sites/dist/css/foundation' - this should help.
Note that ~ prefix is a webpack feature SASS compiler is not aware of. So, when using SASS in your file watcher, you have to either change paths to relative or pass --load-path node_modules/ to compiler
I ran into this issue and this solved it for me. Uncheck Track only root files, which is defaultly checked.
I have 2 html files linked to each other and have different css files for each of them, but meteor merges them automatically.
How do I stop this?
You cannot. Meteor merges CSS to optimize its network delivery.
If you want to choose the order your stylesheets have in the merged CSS you may need to :
- Use a language as SASS, LESS or Stylus which allow to generate css so you could do #import 'imports/ui/yourstylesheet.scss' to #import files in the order you want. Note that if you choose to use a language as SASS or LESS you need to put your sass/less files that you want to import into /imports so you manually import them (puting files anywhere else than in /imports makes your files automatically imported). And import these files via a SASS/LESS/stylus file in the /client folder.
OR
- Put your css in /client folder and understand the Meteor's rules to choose in which order your css get loaded :
The JavaScript and CSS files in an application are loaded according to
these rules:
Files in subdirectories are loaded before files in parent directories,
so that files in the deepest subdirectory are loaded first, and files
in the root directory are loaded last.
Within a directory, files are loaded in alphabetical order by
filename.
After sorting as described above, all files under directories named
lib are moved before everything else (preserving their order).
Finally, all files that match main.* are moved after everything else
(preserving their order).
OR
- You put your .css in the /imports directory (so Meteor doesn't import them automatically so you can choose in which order you load css files). And you import your css via a .js (javascript) file put into /client (as files into /client are loaded on your browser). In the .js file you do import '/imports/ui/mystylesheet.css' to import your css.
The cons of the three methods are respectively :
- You have to learn a language if you don't know any of these languages : stylus less or sass.
- Relying on complex rules to choose the order your css get loaded is probably not maintainable and oblige you to have specific names for your css
- css files loaded within a .js file are put in a <style> tag inside the DOM instead of being loaded in a separate .css file (which is not recommended). Besides the css loaded this way doesn't use the toolchain offered by Meteor plugins (compression of CSS, add pre-vendor prefixed to maximize the compatibility of your css and whatever the plugin you have offers you).
You can carefully change the order of load. Such as to make one override the other.
For example consider the following file structure
|-client
|-imports
|-ui
|-page1
|-page1.html
|-page1.js
|-page1.css
|-page2
|-page2.html
|-page2.js
|-page3.css
Here, page1.js will import page1.css and this css will be applied to the template in page1.html
Similarly, page2.js can import page2.css and the same will be applied when the page2.html is rendered.
You can add your css class to the template when calling the route if you are using the iron router.
Router.route('/addMemberProfile',{
onBeforeAction: function () {
$('body').addClass('your required class for this template');
this.next();
},
I have a _common.scss file which I import to various page.scss files:
page.scss:
#import "common";
#page {
...
}
_common.scss:
#import "partials/all";
#import "components/all";
...
But the problem is, since all my pages import _common.scss, the way I have things structured, if I make any changes inside _common.scss (or any of the files it imports), sass has to rebuild all the page css files. But if I just make _common.scss its own file and call it with a <link> tag (<link href="common.css">), then the page.scss file has errors, because it is trying to use variables and mixins defined in _common.scss and its imports.
Is it possible to structure my project so that the page.scss files can use all the mixins and variables in _common, but so that sass doesn't have to rebuild each page.css file each time I make a change to the common file? i.e. - make it so that sass only builds the common file when a change is made in common, and only builds the page file when a change is made in page?
I would say it is not possible, since the aim is to have one css for each page at the end. This said it HAS to be rebuild if something is changed in common.
I have some problems with SASS in ionic,
Whats the problem?
The problem is that custom stylesheet's doesn't work how it should.
I have sass folder with ionic.app.scss file and _test.scss file with some code.
I imported _test.css in ionic.app.scss file like this:
#import "../scss/test";
And when I edit and save ionic.app.scss, it's works perfectly, compiled in min.css and working in my browser, but when I edit and save my _test.scss file, nothing happening. _test.scss file only works, when I compile my ionic.app.scss file.
Can someone help me with that? What I miss??
Without seeing your folder structure, It's a shot in the dark but i think your _test.scss file isnt being watched.
Try moving it to be in the same directory as the other files and change your import to be.
#import "{folderName}/test";
Just make sure its within the scss folder with the other files
First of all I'm assuming you are using Ionic 1.x.x in my answer. You have a couple of places where you should check.
First is the ionic.project file:
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
]
Make sure you have your directory inside the watchPatterns. This most probably is correct since it's the Ionic default. You however mentioned sass folder in your question so I can't be sure. This is why I'm suggesting all the custom folder stuff below. Although you also mentioned that ionic.app.scss is located in the same folder so the folder probably is the default ionic folder if you have not changed the name of the folder.
Secondly in your gulpfile.js you have the following:
sass: [
'./scss/**/*.scss',
'./www/customfolder/**/*.scss'
],
Make sure your css file is included in these paths. The second one is a possibility when a custom folder is used. Just set the path correctly. This will then use the default ionic gulp task sass and watcher watch.
After this you should be able to include your custom SASS stylesheet in the scss/ionic.app.scss file (not in www folder) with the following:
#import "www/customdirectory/style"; // If custom directory
/* IN YOUR CASE */
#import "style";
If the _style.scss file is in the same directory as the ionic.app.scss then you do not need to set the path, just the name of the file is enough.
Hopefully this can be helpful to you when trying to solve your problem.