I have an application, which gets deployed with two themes -- "normal" and accessibility -- which are implemented by having rules
#app.default {
#import './assets/scss/app.scss';
font-family: $font-family-base;
}
#app.accessibility {
#import './assets/scss/app-accessibility.scss';
}
and binding #app's style attribute. I have a need to deploy this same application in multiple places, but with a different "normal" theme. What are the strategies to be able to choose which theme to use during build time, while preserving ability to switch to (always same) accessibility theme at runtime? This compilation is done from an ant script, so I could in principle use eg app1.scss and app2.scss files for different deployments, and then before invoking vue build, copy chosen file to app.scss. This doesn't look like a clean solution to me though, are there better options?
Related
Vuetify allows us to change the default themes and presets by using a variables.scss/sass file in our project.
But I am unable to figure out how to change the font-style/font-weight (or any other global properties except the color) for the entire app, dynamically on the fly.
For Example:
We have a vue application running and the global font is currently set to Roboto,
What I want to do is provide a list of available fonts in a v-select and dynamically feed the selected value(suppose Raleway) in the variables.scss file or somehow trigger Vuetify to pick up the updated font-family (even other customizations), and change the default font to Raleway for the entire application.
I don't want to add classes everywhere. It won't be maintainable.
Any ideas on how can this be achieved?
Thanks in advance!
Changing the font app-wide is possible through the variables file as you mention, but this is a build-time decision. If you're wanting the user to swap out the font in the running app, there isn't any mechanism for this as far as I know, because the app is already compiled and running.
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
We are working on a React application (using Create React App without ejecting it) and we decided to use Ant as our base component library.
Now that we are near the end of the project, we discover that the application will be integrated into a corporate portal (WebSphere) as a "portlet", so we inherit all the CSS files from the main page.
Both frameworks seem to have their own reset styles, but they use different values.
So far, I have not been able to find a LESS variable in Ant that can be used for prefix all Ant's CSS rules.
Has anyone ever tried to make them live together?
We don't own the parent development, we can only make change on the React part, so only things related to Ant.
We finally go with a specific CSS patch file, and we add rules when needed.
Not really perfect, but none of the suggested path did the job we expected.
Here you can see some of the default antd variables.
One of them is #ant-prefix: ant;. I think you can change it and apply different styles.
That is a tough one, and at the end of development no less!
As #froston mentions, and which you seem to have tried the #ant-prefix: ant; in addition to this you will need to se prefixCls as a prop on every component instance you create, which will definitely be an exercise in self-flagellation.
Even if you set a global CONSTANT and import and use this with your components, you still have to thread it through to all the places, and will need to be appended with the component name.
By way of example, the defaultProps for an anchor is prefixCls: 'ant-anchor'.
Hope this helps and good luck!
Is there a way to apply different styles depending on the operation system? How does one define separate themes for Windows, macOS and Linux?
There is currently only one "default" theme, platform-specific themes are planned, but not yet implemented.
If you want per-platform themes/styles, you need to add them to your Application.Styles manually inside Application.Initialize using StyleInclude class (See App.xaml from application template). For platform detection you can use AvaloniaLocator.Current.GetService<IRuntimePlatform>().GetRuntimeInfo().OperatingSystem.
I'm writing a Windows Store app, and I'd like to know if it's possible to suppress the generation of the "Common" folder, containing the code from Microsoft, which - imho I do not need.
Any ideas?
Cheers
Common contains StandardStyles.xaml which per App.xaml:
<!--
Styles that define common aspects of the platform look and feel
Required by Visual Studio project and item templates
-->
<ResourceDictionary Source="Common/StandardStyles.xaml"/>
and in StandardStyles.xaml:
<!--
This file contains XAML styles that simplify application development.
These are not merely convenient, but are required by most Visual Studio project and item templates.
Removing, renaming, or otherwise modifying the content of these files may result in a project that
does not build, or that will not build once additional pages are added. If variations on these
styles are desired it is recommended that you copy the content under a new name and modify your
private copy.
-->
That said if you've determined it's not something you'll need just delete it, simpler and less fragile than hacking a T4 template (or whatever mechanism is used) for the code generation.