Under my app/assets/stylesheets I created a folder components because I like to create styles specific to each one of my html components. This way in my actual sass file (some_page.scss) I can just do a few imports depending on what I need.
for a visual, here's what the folder structure looks like now:
- app
- assets
- stylesheets
- components
_component1.scss
_component2.scss
application.css
page-specific.scss
right now under components I have
_colors.scss // declaring colors for my app
_other_stuff.scss // other stuff...
usually when doing imports, I import colors first so that I can use them in the rest of my components. But rails is complaining:
Showing /Users/abdulahmad/Desktop/rails/password-service/app/views/layouts/application.html.erb where line #5 raised:
Undefined variable: "$green".
am I supposed to do something special to tell rails that I want my sass compiled in the components folder? or is this error being thrown for another reason?
by the way, here are the contents of my page-specific scss file:
#import 'components/colors';
#import 'components/inputs';
Rename your application.css to application.css.scss
And then application.css.scss file has to be like below.
#import "components/*";
#import "page-specific";
Related
I am new to styling using app.scss for a new create-react-app and would like to know the following:
Should i store all the .scss and .css files in the style folder?
If I would like to import all of them into the app.scss, how do I
go about doing that?
I noticed that app.scss does these:
#import '~bootstrap/scss/bootstrap'
$fa-font-path: '~#fortawesome/fontawesome-free/webfonts'
When i tried to do this: #import './myStyles.css' it does not get picked up. I am not sure what is going on.
The reason i am adament about putting it in the app.scss file is becauase i created a toggle that allows me to switch between dark and light theme. However, I am unable to add customed theme to the existing themes.
Hope my question is clear
Here is reply for you query-
1.Should i store all the .scss and .css files in the style folder? - for this you have to make two folder, one is css and another sass(better approach)
2.If I would like to import all of them into the app.scss, how do I go about doing that?-
"#import 'reset';" no need of scss extension
If you are working on big project then i would suggest you that better follow this structure.
inside sass or scss folder make subfolder for diffrent works like vendor, module,particles etc. like modules/_colors.scss and follow below structure
// Modules and Variables
#import "partials/base";
#import "partials/buttons";
I hope this will help.
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'm working on a project with webpack to load all my assets.
I load my assets like that in app.js and concat them with ExtractTextPlugin:
import 'foundation-sites/scss/normalize.scss';
import 'foundation-sites/scss/foundation.scss';
import './../sass/app.scss';
I read somewhere that webpack will read each line and one by one compile to CSS and append them to my dist file.
My problem is that I want to access the variables and mixins in foundation from the app.scss, but since they are compile one after the other and appended, it doesn't seem possible to access those mixins and variables. Any one has a solution?
You need to load your dependent .scss files within app.scss.
To do this with webpack. I've configured my app.scss like so:
#import '~foundation-sites/scss/foundation';
#import 'settings';
#include foundation-everything($flex: true);
// the rest of my imports now have access to Foundation mixins
#import 'mycomponent.scss'
The ~ tells sass-loader to tell webpack to look in the modules directory for those files.
I have two less files. one named main.less which imports bootstrap.less (which includes bootstrap variables.. etc.) and dash.less which has just styles for my dashboard. These two files should generate two css files. main.css and dash.css.
I'm including the main.css in to all my pages and the dash.css in to just the dashboard.
What i'm trying to do is: compile the main.less with included bootstrap variables in to main.css. Then compile the dash.less using the bootstrap.less variables in to dash.css. However this will result the contents of bootstrap.less to be included again in the dash.css which i don't want because i'm already including the main.css in my html.
Has anyone ever came across this ?
After trying several methods my decision was to use a grunt task to remove the duplicate css blocks.
Found a way. I had to use import like this:
#import (reference) "bootstrap.less";
.myclass{color:#bootstrap-variable;}
.anotherclass{.classDefinedInBootstrapLessWhichUsesAVariableDefinedInVariablesLess}
Using "reference" will source the imported file but not include it.
Compiling all less files to one file will be good .But if you want to have variables of bootstrap.less in dash.less. Then there is one solution , if you see in bootstrap with less dump in bootstrap.less , component wise less files are included like -
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
// Reset
#import "normalize.less";
#import "print.less";
etc.so if you want to use variables you can import '#import "variables.less"' in your 'dash.less' thats it :)
In my Rails project I have 3 .css files:
application.css
bootstrap.css
todo.scss
If I wanted to add another .css library is there a way of controlling the order the .css files are read when .require_tree is called in application.css.
Also how does Rails know to load load bootstrap.css before todo.scss so that bootstrap does not overide the specific View scope styling in todo.scss?
SCSS
I believe the require_tree directive loads the files in alphabetical order
If you want to load the files in your own order, you may be interested in looking into using the #import functionality of scss (the Rails default CSS preprocessor)
You'll be able to do the following:
#app/assets/stylesheets/application.css.scss
#import bootstrap
#import todo
#import **/* /* Directory Globbing ;-) */
--
This will allow you to load the individual files / directories you require in the order you require