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
Related
I'm using Vue2 and laravel-mix and I want to have my variables accessible globally. I eventually found this:
mix.webpackConfig({
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'sass-loader',
options: {
//this might be "data" or "prependData" depening on your version
additionalData: `#import "./resources/js/styles/variables.scss";`
}
}
]
}
]
}
})
This does make my variables globally accessible, but essentially copies the variables.scss into every single vue component, which massively bloats my bundle size.
How can I prevent this?
Edit: This only is an issue, when the imported file is relatively big. In my project, the imported file itsself imported a theme scss (to get access to the themes variables), which ultimately copied this whole thing everywhere I needed the variables.
I fixed this by defining my custom variables in a seperate file and using those variables in the "overwriting-variables" file, something like this:
custom-variables.scss
$red: #ff0000;
overwriting-variables.scss
import 'theme.scss'; //this bloated my project
import 'custom-variables';
$--theme-red: $red
And when I needed this theme color in my vue components I just imported the custom-variables.scss instead of overwriting-variables.scss.
This does fix my bloating issue, but doesn't fully solve the problem, I still have multiple instances of the custom-variables.scss in my project, it just doesn't matter because its really small. So I'd be still happy to hear about other solutions!
You need to separate your functions, variables & mixins from actual CSS rules.
These files will be imported and available to every component you write, which is great for things like variables, functions, or mixins, but you should avoid any actual CSS rules. Adding CSS rules to your shared Sass files will import those rules into every component and bloat your project. For global CSS rules, create a separate file and import it into your main App.vue file instead.
Source: https://austingil.com/global-sass-vue-project/
I created a personal UI-framework (react-components),and want to share the framework with some of my projects.
For good management, I want to upload my framework on NPM.
I used SCSS for my framework consisting of one global SCSS variables file.
How would I approach this if I want to use a different global variable value for each project? I want to set my global variable file out of the node-modules folder.
Would this affect global variables into the node-module from out of the node-modules folder?
Any solution would be greatly appreciated.
SCSS allows you to define default values for variables, which can be overruled.
Example file in your project app.scss
$some_color: blue;
#import 'node_modules/yourframework/main'; // This is your frameworks main file
Example file in your framework node_modules/yourframework/main.scss
$some_color: red !default;
body{
background-color: $some_color;
}
This will result in your body's background being blue.
Good luck!
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).
Im new to SASS and have a question, perhaps I'm not understanding correctly.
I have my base file (global.scss) and then several partial files. I'm working on a project currently and I want to define a few custom colors to use throughout (as in, I want to be able to define $color-navy as '#162a3e'). How can I set these variables and access them in my partial files and my base file?
I really hope this makes sense, I'll try and clarify more if needed.
First you make a file variables.scss with content like
$navy: #162a3e;
Next you just include this file at the beginning of each partial (and your global) as follows:
// Import this in any partial and in your global.scss
#import "variables";
// you have access to $navy ! yay
.saucy{
color: $navy;
}
Technically you can get away with just importing it in your global.scss if and only if you are just compiling global.scss (and not the partials as individual stylesheets) but that's a bigger topic. It doesn't hurt really to just import variables.scss every time.
In my web project I have split my CSS into separate LESS files for maintenance reasons. I have a file called config.less acting as a master file that imports the other less files, using #import directives.
The problem with this setup seems to be that I get a lot of "Undeclared variable" & "Undeclared mixin" while editing my LESS files, for instance while adding a property variable called #textColor in base.less, that is declared in another less file called variables.less. Is there any way of making web essentials aware of variables and mixins being defined in external less files?
Another thing that seems to be tripping up Web Essentials is when I'm using the nested media query feature of LESS:
.some-selector {
background: #000;
#media only screen and (max-width: 800px) {
background: #fff;
}
}
The nested #media declaration gets a red underline, and on hover it says "Unexpected '#' block in the style rule". Hovering the nested background property shows a "Validation: 'color' isn't a valid HTML tag.
I cannot give an answer regarding the #media issue with Web Essentials, but I can give advice on the variables and mixins issue.
Basically, change your config.less file to have the variables.less and any other mixin files to be #import-once, then also add #import-once 'variables.less into each file that uses variables from it (do the same for any mixin files used).
What this does is imports the file if you are working on it (like your base.less), but when all the files are compiled by config.less, it will only import the variables.less once, and not again for each file that also references the variables.less.