I am having a lot of trouble getting bootstrap-vue working. See the image of what happens when I copy and paste the navbar component from the boostrap-vue.js.org. Bits and pieces are missing and I don't understand why. When I create b-links I can create router links that work but they have zero styling. The primary button seems to be OK but then often buttons don't look correct and radios are invisible. Basically something is not right.
boostrap vue navbar example
vue navbar screenshot
Package.json
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"bootstrap-vue": "^2.0.0-rc.11",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/core": "^7.1.0",
"#fortawesome/fontawesome-free": "^5.3.1",
"#vue/cli-plugin-babel": "^3.0.3",
"#vue/cli-plugin-eslint": "^3.0.3",
"#vue/cli-service": "^3.0.3",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
main.js
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App.vue';
import router from './router';
import store from './store';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
Vue.use(BootstrapVue);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Make sure you have both vue-style-loader and css-loader in package.json
Check this post
Related
I am using Parcel to create bundles for my React Typescript application along with Shadow.
Below are my configurations,
///index.tsx file
import customCSS from "bundle-text:./assets/antd.scss"
const appContainer = document
.getElementById(config.containerId)
?.attachShadow({ mode: "open" }) as ShadowRoot
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
appContainer
)
let style = document.createElement("style")
style.textContent = customCSS
appContainer.appendChild(style)
And below is app.tsx file
import React, { Suspense } from "react"
import { BrowserRouter, Route, Routes } from "react-router-dom"
import "./app.scss"
import NotFound from "./pages/404"
import HomePage from "./pages/Home"
import Layout from "./pages/Layout"
const Application: React.FC<any> = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<BrowserRouter basename="/">
<Routes>
<Route path="*" element={<NotFound />} />
<Route element={<Layout />}>
<Route index element={<HomePage />} />
</Route>
</Routes>
</BrowserRouter>
</Suspense>
)
}
below is assets/antd.scss file
#import "npm:antd/dist/antd.min.css";
I have added declaration.d.ts file for declaring bundle-text:.
declare module "bundle-text:*" {
const value: string
export default value
}
ISSUE:
Now issue is that bundle-text is working fine but normal css import is not working. If I comment the bundle-text, then regular CSS import is working fine.
EXPECTED:
Both bundle-text and regular CSS import should work properly.
Below is my package.json dependencies,
"dependencies": {
"antd": "^4.18.8",
"history": "^5.2.0",
"i18next": "^21.6.11",
"parcel": "2.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.15.4",
"react-router-dom": "^6.2.1",
"typescript": "4.5.5"
},
"devDependencies": {
"#csstools/normalize.css": "^12.0.0",
"#parcel/transformer-inline-string": "2.3.2",
"#parcel/transformer-sass": "^2.3.2",
"#trivago/prettier-plugin-sort-imports": "^3.2.0",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"#typescript-eslint/eslint-plugin": "^5.12.0",
"#typescript-eslint/parser": "^5.12.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.9.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "^27.5.1",
"node-sass": "^7.0.1",
"parcel": "^2.3.2",
"postcss": "^8.4.6",
"postcss-modules": "^4.3.0",
"prettier": "^2.5.1",
"process": "^0.11.10",
"sass": "^1.49.8",
"typescript": "^4.5.5"
},
Is it something which I am missing here?
Update:
I have updated added my code to the sandbox environment -
parcel-shadowDOM-react-app
Unfortunately, I think this a bug in parcel - I created a simplified reproduction here and filed this github issue.
As a workaround that you could use before we fix this, I've found that if you do all your css imports through the bundle-text pipeline, parcel will keep it straight. I.e. you'll want to find places in your app where you do global css imports (e.g. import "./styles.css") with this:
import stylesString from "bundle-text:./styles.css"
let styleElement = document.createElement("style");
styleElement.textContent = stylesString ;
shadowRoot.appendChild(styleElement);
You need use sass-to-string package to transform your scss in css first
i installed tailwindcss into a vuejs SPA did all the setup
create a assets/css/tailwind.css and added the necessary base styles
imported it in the main.js file
create a postcss.config.js file and copied the required configuration from the official documentation but the tailwind styles don't apply to my markups.
Inside the tailwind.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
Inside the postcss.config.js:
module.exports = {
plugins: [
// ...
require("tailwindcss"),
require("autoprefixer"),
// ...
],
}
Inside the main.js file:
import Vue from "vue"
import App from "./App.vue"
import "./registerServiceWorker"
import router from "./router"
import store from "./store"
import axios from "axios"
import "./assets/css/tailwind.css"
import firebase from "firebase/app"
import "firebase/firestore"
import "firebase/auth"
The package.json file:
"dependencies": {
"autoprefixer": "^9.7.6",
"axios": "^0.19.2",
"core-js": "^3.6.4",
"firebase": "^7.14.2",
"register-service-worker": "^1.7.1",
"tailwindcss": "^1.4.0",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuex": "^3.1.3"
},
I don't know what am doing wrong.
My solution:
step 1: yarn postcss
step 2: create file postcss.config.js and add content:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
From Tailwind Vue docs:
After the steps you described it is necessary to run vue again.
I have a vuetify application that is set up using vue cli. Unfortunately, some CSS styles are not applied properly.
Example: I am using a v-text-field which is rendered fine except that the input element gets borders set by user agent stylesheet.
I saw this post, and followed its advise to explicitly import VTextField in my main.ts. The result is that I do get the correct CSS loaded and applied to my input field, but unfortunately only in dev mode (npm run serve). When I build my app for production (npm run build), the styles are not linked.
Any advise?
main.ts (with explicitly loading components like VTextField):
import "material-design-icons-iconfont/dist/material-design-icons.css"; // Ensure you are using css-loader
import "../node_modules/typeface-roboto/index.css";
import Vue from "vue";
import { VBtn, VCol, VContainer, VList, VRow, VTextField } from "vuetify/lib";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
Vue.config.productionTip = false;
Vue.use(vuetify, {
iconfont: "md",
components: {
VBtn,
VCol,
VContainer,
VList,
VRow,
VTextField
}
});
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount("#app");
App.vue:
<v-app>
<TopNavigationbar />
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
</v-app>
</template>
<script lang="ts">
import Vue from "vue";
import TopNavigationbar from "./components/TopNavigationbar.vue";
export default Vue.extend({
name: "App",
components: {
TopNavigationbar
},
data: () => ({
//
})
});
</script>
<style lang="scss">
#import "../node_modules/typeface-roboto/index.css";
$font-stack: Roboto, sans-serif;
#app {
font: 100% $font-stack;
}
</style>
And package.json:
{
"name": "rpgbattle-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "./node_modules/.bin/vue-cli-service serve",
"build": "./node_modules/.bin/vue-cli-service build",
"test:unit": "./node_modules/.bin/vue-cli-service test:unit",
"lint": "./node_modules/.bin/vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"material-design-icons-iconfont": "^5.0.1",
"sockjs-client": "^1.4.0",
"stompjs": "^2.3.3",
"uuid": "^7.0.3",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2",
"vue-router": "^3.1.6",
"vuetify": "^2.2.26",
"vuex": "^3.3.0"
},
"devDependencies": {
"#types/jest": "^24.0.19",
"#types/sockjs-client": "^1.1.1",
"#types/stompjs": "^2.3.4",
"#types/uuid": "^7.0.3",
"#typescript-eslint/eslint-plugin": "^2.30.0",
"#typescript-eslint/parser": "^2.30.0",
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-plugin-router": "~4.3.0",
"#vue/cli-plugin-typescript": "~4.3.0",
"#vue/cli-plugin-unit-jest": "~4.3.0",
"#vue/cli-plugin-vuex": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^5.0.2",
"#vue/test-utils": "1.0.0-beta.31",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^6.1.2",
"material-design-icons-iconfont": "^5.0.1",
"node-sass": "^4.14.0",
"prettier": "^1.19.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typeface-roboto": "0.0.75",
"typescript": "~3.8.3",
"vue-cli-plugin-vuetify": "~2.0.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"
},
"engines": {
"node": "^10.14.1",
"npm": "^6.4.1"
}
}
I solved the problem by cleaning up my code, not sure which change exactly made the difference:
I had a duplicate call of Vue.use(Vuetify), one in my main.ts (as posted), a second one in the imported file plugins/vuetify.ts.
In the same file (plugins/vuetify.ts), I had a line import Vuertify from "vuetify" which I changed to import Vuertify from "vuetify/lib", according to this documentation.
I've got an application where I have to configure and use less for dynamic theme implementation. The issue is we are not using angular-cli and configuration is bit weird here, so we are manually bootstrapping angular modules.
Following is the configuration of app:
package.json
"dependencies": {
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"#angular/upgrade": "^4.0.0",
"#angular/animations": "^4.0.1",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "^5.0.1",
"systemjs": "0.19.39",
"zone.js": "^0.8.4"
},
and so on..
main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { ThemeModule } from "./theme.module";
window.appnamespace.platform = platformBrowserDynamic();
window.appnamespace.AppModule = AppModule
window.appnamespace.ThemeModule = ThemeModule;
theme.module.ts
import { NgModule } from "#angular/core";
import { BrowserModule } from "#angular/platform-browser";
import { ThemeComponent } from "./theme.component";
import { ThemeToolbar } from "./Themes/theme-toolbar/theme-toolbar.component";
import { ThemePreview } from "./Themes/theme-preview/theme-preview.component";
import { ThemeService } from "./services/themeManagement.service";
const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
#NgModule({
imports: [
BrowserModule,
],
declarations: [
ThemeComponent,
ThemeToolbar,
ThemePreview,
SetFocusDirective
],
providers: [ThemeService, LocalizeThemeService, CommonService],
bootstrap: [ThemeComponent]
})
export class ThemeModule { }
its component:
#Component({
selector: "my-theme",
templateUrl: "../js/divdrawer/Themes/theme.template.html"
})
export class ThemeComponent implements OnInit {
//
}
and bootstrapping it through javascript like this:
window.appnamespace.platform.bootstrapModule(window.appnamespace.ThemeModule);
theme.preview component
#Component({
selector: "theme-preview",
templateUrl: "../theme-preview/theme-preview.component.template.html",
styleUrls: ['../theme-preview/theme-style.less']
})
export class ThemePreview implements OnInit {
// some code
}
theme-style.less: contains the css
#import "./theme-variable.less";
// some css
theme-variable.less: contains the less variables
#header-bg :red;
#badge-title-bg : #ddd;
I want to use less variables and styles in my theme-preview component to change theme dynamically.
How can I configure less in theme component only.
In your #Component, the property styleUrl has all the style files which need to be complied together into a single CSS file. This is however done by angular CLI.
If you intend to use CLI to generate CSS from less, go to the file called angular.json and change the value of schematics.#schematics/angular:component.style to 'less'.
This however, may not help you in dynamic (run-time) theming. For dynamic theming,
import all the less file using #import statement in any 1 main file
For serer side compilation, compile it using node.js server and less.js when CSS is requested. Therefore, less.js will be a production dependency in your node.js project.
For client side compilation, put the main less file created in step 1 into html's head section as below.
<link href="main.less" rel="stylesheet" type="text/less"/>
Next, import less.js into the main.ts of angular app or use script tag for less.js in the HTML body.
In the #Component, styleUrls can be removed as there is no use of it.
Also, all the component related styles need to be wrapped in 1 class specific to the component(both HTML and less). This will ensure that you achieve the same behavior as that of angular CLI.
Hope this helps. Please comment for any more specific issue in this.
No matter I use Provider in my rendering code or not, I get a blank screen. Then, I found that even I just import Provider from react-redux , I will get a blank screen. But if I comment out the import { Provider } from 'react-redux', the apps work sucessfully.
As suggested by the official repo, I have checked there is no duplicate react module installed with npm ls react and the version of react-redux is above 5, which should be working with react-native.
How should I solve the problem?
Thanks.
App.js:
import React from 'react';
import {
Platform,
} from 'react-native';
import { Router, Scene } from 'react-native-router-flux';
import { Provider } from 'react-redux';
import Home from './pages/Home';
import Chat from './pages/Chat';
export default class App extends React.Component {
render() {
return (
<Router>
<Scene key='root' style={{paddingTop: Platform.OS === 'ios' ? 64 : 54}}>
<Scene key='home' title='Home' component={Home}/>
<Scene key='chat' title='Chat' component={Chat}/>
</Scene>
</Router>
);
}
}
Package.json dependencies:
"dependencies": {
"async-storage": "^0.1.0",
"body-parser": "^1.18.1",
"classnames": "^2.2.5",
"cookie": "^0.3.1",
"es6-promise": "^4.1.1",
"express": "^4.15.4",
"firebase": "^3.9.0",
"jsonwebtoken": "^8.0.1",
"mkdirp": "^0.5.1",
"moment": "^2.18.1",
"mongoose": "^4.11.11",
"morgan": "^1.8.2",
"multer": "^1.3.0",
"nodemailer": "^4.1.0",
"normalizr": "^3.2.3",
"object-assign": "^4.1.1",
"passport": "^0.4.0",
"passport-facebook": "^2.1.1",
"passport-jwt": "^3.0.0",
"prop-types": "^15.5.10",
"react": "16.0.0-alpha.12",
"react-native": "0.47.0",
"react-native-gifted-chat": "0.0.10",
"react-native-router-flux": "^4.0.0-beta.21",
"react-redux": "5.0.5",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2",
"redux-form": "^7.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^4.9.1",
"redux-thunk": "^2.2.0",
"serialize-javascript": "^1.4.0",
"superagent": "^3.6.0",
"validator": "^8.2.0",
"webpack-isomorphic-tools": "^3.0.4"
}
}
Why dont you use react's component. Look below
import React, { Component } from 'react'
use the react-redux for the connect like
import { connect } from 'react-redux'
and
export default connect(mapStateToProps, {sampleActionHere})(ComponentsName)
I think I have solved the problem by upgrading react-redux to 5.0.6.