What is the best way to import overrides.scss from a parent theme in theme.json?
"app/storefront/src/scss/overrides.scss",
"#ParentTheme",
"#ChildTheme",
"app/storefront/src/scss/base.scss"
],
Can't figure out the best way, I now have this in my ChildTheme overrides.scss but that seems a bit ugly:
#import '../../../../../../../ParentTheme/src/Resources/app/storefront/src/scss/overrides.scss';
The overrides.scss file is probably already imported by your parents theme.json, so there is no need to include it again in your version.
Related
I like to have all the media queries at one place, usually in the App.css file because when I want to change something depending on the size I see all the components involved at once.
I am looking for a nice way to do so with styled components. There styles are usually attached to the file where the styled components are defined. I don't want to use wrappers to refer to them with className.
Does someone has a good way to handle this?
After a discussion following solution came up:
const reducer = (accumulated, [condition, css]) =>
accumulated +
`
#media(${condition}) {
${css[componentName]}
}
`
const addMedia = componentName => Object.entries(theme.media).reduce(reducer, "")
Now you have all the media queries at one place and you need just to add them within the styled component via:
${addMedia("componenName")}
I have a simple sass variables declarations as below
$theme-primary-dom: #181818ff
$theme-primary-sub: #29292Bff
$theme-secondary-dom: #FAFAFAff
$theme-secondary-sub: #C4C4C4ff
$theme-primary-sub-transparent: #29292B22
This is what I need for dark theme that is a default theme. BUt I want to add a light theme as well. In my brain it is very simple.
if .wrapper.darktheme{
$theme-primary-dom: #181818ff
$theme-primary-sub: #29292Bff
$theme-secondary-dom: #FAFAFAff
$theme-secondary-sub: #C4C4C4ff
$theme-primary-sub-transparent: #29292B22
} else {
$theme-primary-dom: #FAFAFAff
$theme-primary-sub: #C4C4C4ff
$theme-secondary-dom: #181818ff
$theme-secondary-sub: #29292Bff
$theme-primary-sub-transparent: #C4C4C422
}
Now I have no idea how to do this in SASS.
Also, I have
<button class="theme__switch theme__switch--light">theme is light</button>
in header component
and,
<div class="wrapper darktheme"></div>
in main app.vue. which increase complecations as the trigger button and the trigger area are in different components.
I can easily get this using jquery of course, But since I am using vue.cli, adding jquery code didn't felt right. I have been searching all over stackoverflow and google for past 3 days but I haven't found a relative solution yet.
I wrote a reusable app in Vue and I compiled it as a library. I set the global variable $brand-color in SCSS file which is a main color of the app (buttons, borders, font colors). I use this variable in other SCSS component files.
I've put my app to my client's website and everything is working fine. Right now I have another client who is willing to use my app. BUT... new client wants to have my app in different $brand-color than my old one. What would be the best way to approach this problem?
One thing which comes to my mind is to set store variable with value of $brand-color which depends on location.host and bind styles of all "branded" elements.
switch (location.host) {
case 'client1.com':
context.commit('setMainColor', '#ff0000');
...
case 'client2.com':
context.commit('setMainColor', '#16c100');
...
}
But this will be very painful. I would need to apply a lot of changes in all my components. Is there any better solution that style-binding all components?
By the way, I can't use CSS variables because code needs to be IE friendly.
You can have 2 files, each file definne scss variable for different customer:
customer1_variables.scss
$brand-color: green
customer2_variables.scss
$brand-color: red
And you can import it in javascript file
main.js
switch (location.host) {
case 'client1.com':
import './customer1_variables.scss'
...
case 'client2.com':
import './customer2_variables.scss'
...
}
Another solution is using vue-style-component. You can check this article for more detail
So finally I set store value depending on my client and prepared set of SCSS classess specified for each client, i.e.:
.btn-client1 {
background: red;
}
.btn-client2 {
background: blue;
}
...
and I binded classes for specific elements:
:class="`btn-${client}`"`
Is there a way to get intellisense to work for imported mutation types with Vue and VS Code. I have the Vetur extension installed and I am using constant named mutations.
I want to have a file - mutation-types.js
export default {
MY_MUTATION_TYPE: 'MY_MUTATION_TYPE',
ANOTHER_MUTATION_TYPE: 'ANOTHER_MUTATION_TYPE'
}
then whenever I import:
import mutationTypes from './mutation-types'
I want to have intelisense on the mutationTypes object.
Is this is anyway possible?
Isn't this wrong and throwing syntax errors?
It should be:
export default {
MY_MUTATION_TYPE: 'MY_MUTATION_TYPE',
ANOTHER_MUTATION_TYPE: 'ANOTHER_MUTATION_TYPE',
}
That would make auto complete work.
Since you are doing default export, in your import you also should use default import syntax. In your case mutationTypes can be any name, so that's why autocomplete will not work in the import. It will work on the object itself though:
To make it work in imports, you should use named exports.
With Java, import is really easy and clear.
You import with the following statement :
import fr.domain.MyUtils;
Then you can use it like this:
MyUtils.myStaticMethod();
You need to namespace MyUtils only if there are two in the same file.
With Typescript AMD and requirejs it seems to be more complicated.
Here the import statement:
import u = require('fr/domain/MyUtils');
And the way to use it:
u.fr.domain.MyUtils.myStaticMethod();
Quite verbose...
The only way I found so fare to use an alias was to double the import statement:
import u = require('fr/domain/MyUtils');
import MyUtils = u.fr.domain.MyUtils;
After doing that you can write this in a module:
MyUtils.myStaticMethod();
It's cleaner but Eclipse TS plugin get completely lost with this and auto completion become erratic. In Visual Studio auto completion is OK but "F12 Go to definition" has to be done twice which is annoying.
Is there a better way to do this ? Or should we just keep namespaces as short as we can ?
You’re doing it wrong.
Your 'fr/domain/MyUtils' module should be exporting only whatever is supposed to be MyUtils. i.e. it should look like this:
export function myStaticMethod() { /* ...code... */ }
It should not be exporting some global namespace object, and it should not be adding anything to some global namespace object that you get from somewhere else. The natural placement of module files in directories is the way you create “namespaces” when you work with external modules.
If you do it correctly then your consumer looks like this:
import MyUtils = require('fr/domain/MyUtils');
MyUtils.myStaticMethod();
or, even more properly using ES module syntax:
import { myStaticMethod } from 'fr/domain/MyUtils';
myStaticMethod();