here I have a problem. in nuxt 2 I can use #import inside the tag, but not in nuxt 3?
does anyone know how i should make it work in nuxt 3?
I was expecting like this.
...
<style scoped>
#import url('assets/css/custom.select2.css');
...
</style>
and what do I need to install and what setup should I do?.
Thank you in advance
Related
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?
After integrating stylus into my Vue3 application, my global css variables no longer work (loaded through prependData as mentioned here).
Old, working code (no stylus):
<style>
.item {
background-color: $bgColor;
}
</style>
New code, doesn't work (w/ stylus):
<style lang="stylus">
.item
background-color: $bgColor;
</style>
Is it possible to update my old code to leverage stylus and keep my variable structure? Thanks for your ideas.
Why do I import scoped but it still affects other components.I have consulted this article but the solutions are generating error [https://stackoverflow.com/questions/49653931/scope-bootstrap-css-in-vue]. Thanks.
<style scoped>
#import '/public/admin/bs3/css/bootstrap.min.css';
#import '/public/admin/css/bootstrap-reset.css';
#import '/public/admin/font-awesome/css/font-awesome.css';
#import '/public/admin/css/style.css';
#import '/public/admin/css/style-responsive.css';
</style>
Trying to create a new component style using the $display-breakpoints stylus variabled from Vuetify (as described in this answer) but it doesn't seem to work.
<style lang="stylus">
.submit-container
#media $display-breakpoints.sm-and-up
font-size 5em
</style>
I get the following error:
$display-breakpoints has no property .sm-and-up
I needed to import the variables stylus file:
<style lang="stylus">
#import '../../assets/style/variables.styl'
.submit-container
#media $display-breakpoints.sm-and-up
color #ef4655;
</style>
My problem is that I have several DIVs that all look like this:
<div class="col-sm-4 col-md-3 col-lg-2">
...
The thing is, if I decide to change the layout of this, I want to change all of them at once. I tried doing this:
CSS:
.product-layout {
#extend .col-sm-4;
#extend .col-md-3;
#extend .col-lg-2;
}
HTML:
<div class="product-layout">
...
But this didn't work. Is there some way to do this?
In order to be able to use extend, you should also make sure that you use #import to include bootstrap in your project.
(cfr. http://sass-lang.com/guide#topic-5)
so basically you would use #import "bootstrap"; (using the bootstrap sass project: https://github.com/twbs/bootstrap-sass).
If bootstrap isn't included in your scss, you won't be able to extend the classes.
example:
/* Import bootstrap-sass so that we have access to all of its selectors */
#import "bootstrap";
.product-layout {
#extend .col-sm-4;
#extend .col-md-3;
#extend .col-lg-2;
}