I'm using Rails 3 for the first time (especially asset pipelining and less-rails-bootstrap), so I might be missing some really basic concept here. I've tried two approaches for including the Twitter bootstrap CSS into my project and both have problems.
Approach #1: app/assets/stylesheets/application.css has require twitter/bootstrap. This includes the bootstrap css file using a separate link/href tag, which is good. However, the problem is that in my custom CSS file, say app/stylesheets/mystyles.css I am unable to access variables+mixins defined in less within the bootstrap code, like #gray, .box-shadow, etc.
Approach #2: Put #import 'twitter/bootstrap' at the top of app/assets/stylesheets/mystyles.css. This allows me to access variables+mixins defined in less (within the bootstrap code), which is good. However, the problem is that it pulls in the entire bootstrap CSS at the top of mystyles.css increasing the filesize. If there are a bunch of different stylesheets that #import twitter/ bootstrap it would cause a lot of duplication.
What's the recommended approach for handling this situation?
Your answer is sufficient if you want to exclusively use the default twitter bootstrap variables. If you find yourself wanting to override the variables and have them applied to BOTH twitter bootstrap's styles AND your own styles, you'll need to do separate out your variables into its own myvariables.less file and have that file included with twitter bootstrap instead of in the manifest.
Example
application.css:
/*
* Notice we aren't including twitter/bootstrap/bootstrap in here
*= require bootstrap_and_overrides
*= require mystyles
*/
bootstrap_and_overrides.less:
# Bootstrap with both bootstrap's variables, and your own
#import "twitter/bootstrap/bootstrap";
#import "myvariables";
mystyles.less:
# Your styles with both bootstrap's variables, and your own
#import "myvariables";
h1 {
// Use
color: #textColor;
}
myvariables.less:
#import "twitter/bootstrap/variables";
#textColor: green;
I figured out a possible way to do this without leading to (too much) repetition of CSS code.
application.css
/*
*= require twitter/bootstrap
*= require mystyles
*/
mystyles.css
#import "twitter/bootstrap/variables.less";
#import "twitter/bootstrap/mixins.less";
/* My styles come here, which use variables & mixins defined in twitter bootstrap code */
Related
Im looking for a trick to make my life easier. I want to style each component in my nuxtjs application with a similar color palette, but I do need to enter the color palette in each component. Tried to use scss for the first time. How do I put variables more globally and how to reach them?
I tried to put the code into assets/scss/styles.scss But components know nothing, about remote scss.
$color1: #808060;
$color2: #3D3D34;
$color3: #151510;
$color4: #090906;
As #jayce444 mentioned, this thread will give you multiple options to achieve the task.
However, you need to think before you take this approach. In general, you should import your variables file in each component SCSS:
<style lang="scss">
#import "<PATH_TO_ROOT>/assets/scss/styles.scss";
.someclass { color: $some-variable; }
</style>
By doing this, you will protect yourself for many uncertain future possibilities. Some of them are:
Splitting repository into multiple micro front-ends
Moving into Lerna like Mono repo setup
Reusing component in other code-bases
Being explicit is more maintainable than having magical auto/global imports. We, as developers, spend more time maintaining code than writing new code.
Alternately, another clean solution is not using vue-loader for managing SCSS. It means you should not use style tag inside .vue files.
Create one master style.scss file. For each component create dedicated .scss file. And import all these files into master style.scss like:
// External third party scss from node_modules
#import '~#material/button/button`;
// Base color style sheet (SCSS variable are global)
// By importing it here, all the subsequent .scss file have access to variables
#import './styles/colors`;
#import './components/component-1`;
#import './components/component-2`;
// .... Add remaining component
#import './components/component-n`;
There are a few advantages. Your stylesheet is no longer tied to the framework specific abstraction. You can reuse your style more easily with other code bases built on top of other frameworks. Of course, if you need to have Scoped-CSS which .vue files provide out-of-box, consider using BEM notation.
Finally, if you decide to import variables .scss file in each component, then you can use node-sass and webpack aliases to shorten the import path.
I know this is an old question but the answer still might help someone.
So to include the variables, mixins any SCSS style globally you need to load it using NuxtJS Style resource.
So for example you would have the settings.scss file in /assets/scss
$color-one: #fff;
$color-two: #000;
And you would import it in nuxt.config.js through styleResources object
styleResources: {
scss: ['assets/scss/settings.scss']
},
Make sure to read the Style Resources documentation for more info
I'm a little embarrassed I can't seem to figure this out. I'm getting an error whenever I refer to a foundation variable in my scss sheets, for example.
Undefined variable: "$primary-color". (in /my/path/to/mysheet.scss)
Here's my app.scss
/*
*= require_self
*= require_tree ./a_folder
*/
#import "foundation/foundation-global";
#import "foundation/_settings";
#import "foundation";
I suspected it's because the imports are after the requires. But when I reverse the order, all my stylesheets are missing.
What am I doing wrong?
I met same situation in Bootstrap. If using require, all variables can't be used on custom scss files.
The solution is to use #import but no require at all.
I suggest you to remove all require, and #import your custom css files manually in application.css.scss. #import will also work for asset pipeline, so nothing to worry at all, just type some words more.
I've got a rails app using the bootstrap-sass gem. I'd like to change the width the navbar collapses from tablet (979px) to phone (769px). Overriding a media query isn't a tidy solution.
I've edited #navbarCollapseWidth in variables.less and built bootstrap, then copied the contents bootstrap-responsive.css into responsive.scss in gems...vendor/assets/stylesheets/bootstrap. Now however, I've lost the ability to update the gem without losing my changes.
What's the best method here? I'd like to make what I think is a simple change but keep my gem update-able. Perhaps using #import "bootstrap-responsive-mine"; in application.css.scss then manually updating that file when I need to?
Did you read some info about configuration this gem?
Import "bootstrap" in your SCSS file of choice to get all of Bootstrap's styles, mixins and variables!
#import "bootstrap";
Need to configure a variable or two? Simply define the value of the
variable you want to change before importing Bootstrap. Sass will
respect your existing definition rather than overwriting it with the
Bootstrap defaults.
$navbarCollapseWidth: 769px;
#import "bootstrap";
Or that is not what you need?
I am trying to use LESS variables in Twitter Bootstrap but cant seem to get them to render in my application.css file
So when i setup bootstrap i installed
rails generate bootstrap:install --less
Which gave me my
bootstrap_and_overrides.css.less
So my understanding is that in this file i can set my LESS variables like so
#white:#FFFFFF;
and then in my css file i can just call them like so
color: #white;
In my bootstrap.less file i call these
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
#import "twitter/bootstrap/variables.less";
and in my application.css file i call the bootstrap file
*= require bootstrap_and_overrides
Gemfile
gem 'less-rails'
This doesnt work and my variables are not being applied
Can anyone see anything that i am doing wrong?
any help appreciated
Thanks
... I can set my LESS variables like so
#white:#FFFFFF;
and then in my css file i can just call them like so color: #white;
Hi, I'm not so familiar with using LESS inside Rails, so apologies if I'm off here.
I can only use less variables inside a file which will be compiled. So for example I can set
#white:#FFFFFF in a variables.less file
perhaps in a custom.less file I have
.light{
color:#white;
}
After I've compiled everything I can use the class .light in my CSS
So to address your quote above, you can set your less variables like
#white:#ffffff
and then you can use that variable in another less file which will be compiled, but not directly in a CSS file.
What I have:
In Rails 3.2.2, I have the following stylesheets:
app/assets/stylesheets
|
|-- application.css
|-- bootstrap_and_overrides.css.less
|
|-- annotations.css.less
|-- maps.css.less.erb
`-- users.css.less.erb
The two first ones are more or less system-default. The other ones are where I define my custom styles.
So, application.css, as usual, includes all the other files:
*= require_self
*= require_tree .
And bootstrap_and_overrides.css.less, of course, includes Twitter Bootstrap as well as some other custom defined LESS variables.
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
// other stuff
#brown_text: #332820;
What doesn't work:
Now, in annotations.css.less, I'd like to use #brown_text, but it gives me:
variable #brown_text is undefined
I figure this is because there's no reference from annotations.css.less to the "master" file where the variable would be defined. And it seems that annotations.css.less is compiled first – note that I'm currently in development environment.
So, how can I use my custom LESS variables then, and make them available in other stylesheet files? My current "fix" is to just move all my custom styles into bootstrap_and_overrides.css.less.erb, which doesn't seem very clean at all.
What also doesn't work:
Just importing the LESS files isn't possible, because they use Rails' asset path helpers. And importing an ERB file is also not possible, since the #import statement won't find the file, because it expects a .less suffix.
You don't need to use ERB for asset path helpers – they're actually baked into the less-rails gem, which you can reference here: https://github.com/metaskills/less-rails/#helpers
You should be able to just use asset-path or asset-url anywhere you've used ERB to refer to the assets pipeline.
Given this, the best way to go would be to:
Convert application.css to application.css.less
Delete all the Sprockets directives
#import each individual file in the directory.
Remove the .erb extension from any files that have it, and change ERB asset helpers to less-rails asset helpers.
Make sure annotations.css.less is imported after bootstrap_and_overrides – this is why it's usually not a good idea to use require_tree ., since you can't control the order in which the files are loaded. The way you have it now, annotations.css.less would be loaded before bootstrap_and_overrides – before the variable you want to use even exists.
Hope that helps!
The way twitter-bootstrap-rails is compiling things, you will need to import your other LESS stylesheets into the overrides file. So for an additional file, annotations.less:
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
//other LESS styles
#import "annotations"
For more, look into less-rails, which this gem uses underneath.