Switching from "bootstrap": "~4.0.0-beta.2" to "bootstrap": "^4.0.0" added new variables in the _variables.scss. Boostrap classnames only change when there is a major version upgrade (AFAIK), but does the same apply to _variables.scss too?
It would change how we share the _variables.scss accross our application.
Does variable names change between releases?
The variable names shouldn't change as Bootstrap 4 is now in "real" release (out of beta).
The variables are there for a good reason: Your CSS shouldn't break when you upgrade. (not counting major versions of course).
Of course new variables can be added, as those shouldn't break your CSS.
If you are in any way unsure before upgrading, you can always check the changelogs. Those should tell about any breaking changes.
Using variables in SCSS
When you have set up your build tools, and created your SCSS file (let's say custom.scss), you can import Bootstrap and override any variable you want (you'll find them in _variables.scss in the Bootstrap source code):
//Your variable overrides
//Let us change the primary color which is set in the primary variable
$primary: #ce40c5;
//In this case we are importing everything
//Here we are using NodeJS with NPM, so your files should be here
#import "node_modules/bootstrap/scss/bootstrap";
Some things to note:
If you aren't using NodeJS, then just make sure that the import path directs to the bootstrap.scss file (don't put .scss in the import)
If you have checked the source code of Bootstrap 4, you may have seen !default after every variable. Don't include that in your override. It just tells Sass that the variable can be replaced
There's a bunch of good information about this in the docs, so feel free to check there if you are missing anything (or ask).
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 use webpack for JS and now I want to use it for styles. I have a lot of styles in different folders and i want to compile them all without requiring each of them mannaully. The question is how to gather all the .less files in the folders and compile them via less-loader?
This isn't how webpack is meant to work, really. If you really want to do this, grunt/gulp is going to be a better choice.
Webpack's require mechanism ensures you build only the CSS you need for any given entry point, and gives you dependency management as well. If you do want to use webpack, but don't want to use the style-loader to insert them into the DOM etc., you can use the Extract Text plugin to build your compiled CSS into a separate file.
I found some workaround using require.context.
First you need to create a js file in the root of the styles folder if you don't have one.
Use this code if you use css or less and always extract them
require.context('./', true, /(\.less$)|(\.css$)/);
First argument is relative path to folder in which webpack should search for the files, second tells that it should search in subfolders and the last one is regexp of the extension of the files that webpack should require. Then you need to requre this file or use it as entry point. This works if you use extract-text-webpack-plugin but doesn't work otherwise.
Using styles without extracting them to style separate file
The example above doesn't work if you don't extract them because webpack generate modules with styles but doesn't execute them. This is complete example that works in both cases:
(function (requireContext) {
return requireContext.keys().map(requireContext);
} (require.context('../', true, /(\.less$)|(\.css$)/)));
Short version: I would like to use a font set to REPLACE Glyphicons without also including Glyphicons CSS, and without modifying the source bootstrap.less file.
Long version:
Using Bootstrap's own Grunt file and source files as a base, by default a build process will include Glyphicons in the compiled CSS file.
Since I do not plan to use Glyphicons at all, the "lowest hanging fruit" for me is to go ahead and compile this way, but also include the font I will be using (for example, Font Awesome).
However, the more "elegant" way will be to only include the replacement font.
I can modify bootstrap.less, which includes this line:
#import "glyphicons.less";
such that the Font Awesome less file is used instead. However, the problem with this is that I am using Bootstrap as an "untouchable library" not as a modifiable source file. I want to be able to drop in new versions of Bootstrap at a moment's notice without the need to remember to change this modified line.
Does Grunt have the concept of "replace string A with string B in memory before the compile runs"? Or is there another way to accomplish my goal? Or should I just not worry about it and include both sets of compiled CSS?
I think you can use grunt-string-replace
https://github.com/erickrdch/grunt-string-replace
Based from the Readme files of Mirage 2, it says here:
If you want to base your theme on an existing Bootstrap theme (like the ones at bootswatch.com) you can do so by using the standard Bootstrap color scheme and replacing the import of Bootstrap in bootstrap_color_scheme/_main.scss:
#import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap";
with an import of just its _variables.sccs file (those variables need to be defined, because they are used in _dspace-bootstrap-tweaks.scss):
#import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/_variables";
Then import the the css file(s) of your Bootstrap theme of choice below it. Depending on the theme you may also need to update the twbs-font-path function right above that import statement.
What I did:
Ok, so I activated the mirage2_bootstrap_color_scheme maven profile. Copied the bootstrap_color_scheme/_main.scss from dspace-xmlui-mirage2/src/main/webapp/styles/ into dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles.
I changed the text in _main.scss that says #import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap"; into #import "../vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/_variables";, and then I copied the bootstrap.min.css that I downloaded from bootswatch.com and put it in the same directory with _main.scss and then I referenced it in _main.scss with an #import "bootstrap.min.css"; statement.
I'm having this error when running mvn package:
error styles/main.scss (Line 12: File to import not found or unreadable: variables.`
I also tried putting the _variables.scss under the bootstrap_color_scheme directory and used the #import "variables"; but I got the same not found or unreadable error.
Can someone guide me on how to correctly use the themes from bootswatch.com to apply to Mirage 2? An example and a simple walk through of using a sample theme from bootswatch.com would be great.
Thanks in advance.
I deleted my other answer because I was mistaken.
Here is an example of a working bootswatch theme:
https://github.com/antoine-atmire/DSpace/tree/mirage2%2Bbootswatch/dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles
The /styles/bootstrap_color_scheme/_main.scss file gets copied to /styles/main.scss during the build process, so the #import statements should be relative to /styles/main.scss.
Bootstrap-sass has updated its paths, and the Mirage 2 docs are not yet updated.
_variables.scss is now stored here: "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss"
Depending on which version you're using, it can even be in another place.
A general recommendation is to look at the vendor folder in:
dspace/modules/xmlui/target/xmlui-*/themes/Mirage2/vendor/
Look for the path of the variables file there and use that path.
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?