I have a simple view in Vite + Vue + Sass. For styling i'm using external sass files for each component/view by using module ='classes' in the style tag and #use to use the specific scss file that should style the component/view. This doesen't trigger Vite HMR, I have to manually trigger a refresh in the browser for styles to change. HMR works just fine if I include the styles locally in the style tag, but it doesn't work with an external scss file. Here is an example:
<script setup>
import LogoNav from "#/components/navs/LogoNav.vue";
</script>
<template>
<LogoNav />
<main :class="classes.main">
<div :class="classes.loader"></div>
</main>
</template>
<style lang="scss" module="classes">
#use '#/sass/views/loading-profile';
</style>
My sass folder structure looks like this:
Where im using the global scss files like abstracts, base and utilities in main.scss:
And importing the main.scss file in main.js
Am I missing something crucial here? Have anyone encountered the same problem?
Related
In my nuxt project in assets folder i have a file with global styles default select for example. When i have some styles in my component or just some comment in tag - everything works well. But when tag is empty - styles are not applied, but bootstrap styles still working. I'm using nuxt 2.15.3
Element
<b-form-group label="some label">
<b-form-select class="default-select"></b-form-select>
</b-form-group>
Style tag
<style scoped lang="sass">
//*If you will delete this comment - nuxt will not download global styles here. Magic
</style>
Maybe there some webpack error
I know one can develop vue.js application without build process, for example by including
<script src="https://unpkg.com/vue#3"></script>.
But what about plugins? Let's say I want to use vue-good-table, should I find a link for every minified javascript file for every plugin, and their dependencies too?
Is there an easy way to do it?
The reasons are explained here, I need to add functionality to existent web applications.
vue-good-table-next (for Vue 3) has a "global" build that works via CDN, but it expects window.vue to already be defined, so you'd have to import vue first (which defines window.Vue), and assign a global vue to Vue:
<script src="https://unpkg.com/vue#3.2.33/dist/vue.global.js"></script>
<script>
// workaround: VueGoodTable expects 'vue' to be defined
window.vue = window.Vue;
</script>
<script src="https://unpkg.com/vue-good-table-next#0.1.0/dist/vue-good-table-next.global.prod.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-good-table-next#0.1.0/dist/vue-good-table-next.css"
/>
Then, VueGoodTable.default is defined as the vue-good-table plugin, which can be installed on the app instance via app.use():
<div id="app">
<vue-good-table ⋯></vue-good-table>
</div>
<script>
const app = Vue.createApp({⋯})
app.use(VueGoodTable.default)
app.mount('#app')
</script>
demo
I'm trying to import vuetify on my vue app but my UI components are not looking correctly as shown here:
I read that this is caused when you are not using the v-app tag on the app.vue component. However, when I try this, all the elements of the app disappear on the browser. I also get 3-5 console errors about not being able to recognize vuetify functions or calling functions from undefined variables.
app.vue:
<template>
<v-app>
<router-view>
</router-view>
</v-app>
</template>
main.js:
//imports
import vue from 'vue';
import vuetify from 'vuetify';
//bindings
vue.use(vuetify);
//export
new vue({
vuetify,
render: a => a(app),
}).$mount('#app');
index.html:
<html>
<body>
<div id="app"></div>
</body>
</html>
Any help is greatly appreciated.
You might be missing the css file.
In your main.js add import 'vuetify/dist/vuetify.min.css'
More info: Getting started for Vuetify 2.0
I think if you are just starting, using vue add vuetify would be easier if you do have #vue/cli 3.0 or above.
I use vue cli and want to use bootstrap 4. I installed the bootstrap npm package and imported the styles with #import '../node_modules/bootstrap/scss/bootstrap.scss'; in App.vue.
But I can't get the javascript for modal and dropdown working. I tried to include these files in the index.html but it doesn't helped:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
I don't want to use vue-bootstrap.
npm install jquery bootstrap popper.js --save
After that, import js and css in your main.js file. Like below. Hope it help
import jQuery from 'jquery'
import bootstrap from 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
global.jQuery = jQuery
global .$ = jQuery
I am just curious, I installed jquery via npm locally, and created HTML code below
<body>
<script>
import jquery from "jquery";
</script>
</body>
but it got error.
my browser is chrome v65 https://caniuse.com/#feat=es6-module The import is supported and doesn't need compiler
You have to add the type="module" attribute on the <script> tag or else it won't know that you're trying to include ES6 modules. You do this by:
<script type="module">
</script>
Then the jQuery module from npm doesn't export anything by default, so you have to import the whole file like so:
<script type="module">
import './node_modules/jquery/dist/jquery.min.js'
</script>
So I'm importing everything from the jQuery file. Then what we get is the variable jQuery and the variable $ assigned to the global window var.
Try import * as $ from 'jquery'