When I test vue-select in POC project, it works well, see screen shot below:
However, when I use vue-select in my real project, it is disordered, see screen below, did any one have similar issue and how to fix it?
after #import "vue-select/src/scss/vue-select.scss";
Thanks
George
You of course realize that no CSS is applied to the markup, so you need to apply some cuatom CSS.
Or, see the Vue Select docs
how to include their default CSS:
The component itself does not include any CSS. You'll need to include it separately:
import 'vue-select/dist/vue-select.css';
Alternatively, you can import the scss for complete control of the component styles:
#import "vue-select/src/scss/vue-select.scss";
Related
I'm using customize-cra as suggested by antd documentation to be able to customize the theme and it works fine.
I can access less variables from antd theme by importing the index in my less files and it works fine.
I can use the old fashioned css modules to style my components by defining files with .module.css and it works fine.
However, I would like to import and use the antd theme less variables in my css modules and I can't figure out how to make it work. Does anybody know how it can be achieved?
I am able to use the variables if I import antd.less at the top of the whatevercomponent.less file:
#import 'antd/dist/antd.less';
The documentation states that that component styles can be skipped
Skipping Specific Component Styles
Component styles are optional, because they are pulled in from the style library. Therefore, you might want to disable some standard component styles entirely. To disable standard component styles, you can add the component selectors to the $skipComponentStyles list. The following is an example that demonstrates skipping two standard components from the style library:
$skipComponentStyles: (cx-product-carousel, cx-searchbox);
$skipComponentStyles: (cx-product-carousel, cx-searchbox);
Skipping specific component styles might be beneficial if you need to create styles from scratch and do not want to override specific style rules coming from the Spartacus style library.
Where should this be done? I can't get that from the documentation. My first guess should be the global style.scss but for example the following does not work:
#import '~#spartacus/styles/index';
$skipComponentStyles: (header, cx-media, cx-banner, cx-category-navigation);
You're almost right, you just need to swap the 2 lines. The sass variable will be used inside the import of the Spartacus styles, otherwise the variable defaults to an empty var. so, the following will work:
$skipComponentStyles: (header, cx-media, cx-banner, cx-category-navigation);
#import '~#spartacus/styles/index';
I am new in vue and vuetify and I read all the documentations in the internet but I still don't know how to inject CSS from vuetify CSS. I have researched some possible solutions, tried to implement what I searched but I realized that the solutions I have found was for Vue 3.9 and below. I am currently using vue 4.0.5 and vue cli 4.0.5. I badly need a solution to this because I am already spending hours looking for workarounds.
I had the same experience in my latest project. Vuetify has some quirks in it that make CSS styling a little different. In general, using <style scoped> will not cause any changes with Vuetify, but using the global scoping <style> will. For some properties, you'll only notice changes if you use the !important tag.
You'll need to make sure you're wrapping everything and using loaders properly to get your CSS working as you intend. Details regarding that are here in detail:
Vuetify - CSS not working (taking effect) inside component
I am using styledcomponents in my CRA. The thing is that when I inspect an element in the browser all I see is something like this:
<div class="js-cskdjf fdsfsjk fdsfds">..</div>
No idea what component this is , how can I figure this out? I have ejected the app too.
If you are using CRA v2, then it supports babel-plugin-macros
You can use the babel macro from styled components by changing the main import to:
import styled, { createGlobalStyle } from 'styled-components/macro';
This will bring in all properties of the babel plugin that styled components (which you will have to eject to add) This includes better debugging experience, by showing component names inside the devtools. More more information on this, read docs here.
You can use 'React Developer Tools' extension to see the Components layout:
for Chrome,
for FireFox.
I've written the following in an Aurelia app
import "bootstrap/css/bootstrap.css!";
import "./app.css!";
and I want app.css second in since it overrides bootstrap.css styles. However, I'm getting app.css first since I presume the system.js loader is running them in parallel and since app.css is the smaller of the two it gets loaded first.
Is there a way in jspm to define a dependency between these two files to control their loading order is is there some other way?
Many thanks in advance! :)
You could try to import the css using System.import.
E.g. in your index.html:
System.import('bootstrap/css/bootstrap.css!').then(() => {
System.import('./app.css!');
});
But keep in mind that this way you have to make sure that system.js is served with your app. So you can't bundle your whole app as an self-executing bundle.
We have some stuff in the pipeline that should help you with this issue. If you check out this:
<template>
<require from="nav-bar.html"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
</template>
I know that Aurelia will be passing the CSS files to the loader in order, but I'm not sure if we'll be able to guarantee loading order. Hopefully Rob can come over here and give a proper answer to this, though. I'll point him in this direction.
I had exactly the same problem. Controlling order of CSS is not possible in JSPM. I solved this problem with SASS and some tricks. Here's what I've done:
In html you give main element some id:
<html id="some-id">
Then you create sass file that will host your overrides (_overrides.scss):
#some-id {
#import "buttons";
}
Now your buttons.scss can override styles from bootstrap (_buttons.scss):
.btn-default {
background-color: #B6B3C7;
border-color: #B33A3A;
}
This works thanks to the principle in CSS - most specific selector wins. By wrapping all your customizations in #some-id in scss it will produce code with every bit of code that is imported into curly braces prefixed by #some-id. This way your selector will always be more specific than bootstrap one and will override it.
I don't know if this will be sufficient for you as you don't mention scss, but it was for me.
I've faced similar issue during development.
The code below has helped me solve my problem.
Now everything is loading exactly the way I want it.
System.import('bootstrap/css/bootstrap.css!').then(() => {
System.import('./app.css!');
});
Thanks LazerBass for this suggestion.