I am using <style lang="scss"> inside my single file Vue components. But in every single component using my color variables, I need to import the file, ie: #import "./../../../sass/variables";. I am using Laravel Mix to compile the sass + js.
Is there any way to make the varaible accessible without needing to import them?
Please check this related issue on github, I think it has the right answer for you:
https://github.com/vuejs/vue-loader/issues/328
Specially look for mister shaun-sweet's answer.
Related
The Problem
So I'm working on moving a Laravel project from Mix to Vite. Overall, it's been fairly straightforward, but there's been one issue. A lot of my Javascript is built into Blade files and relies on jQuery. jQuery cannot be accessed in <script> tags unless they have type="module" (this has its problems, see below).
What I've Tried
Modifying the script tags that require jQuery with type="module". This works for most cases, except any HTML elements that use functions in these script tags as event handlers break. There are ways around this, but it would require some code changes.
Load two copies of jQuery, one for Vite and one for outside Vite. This works, but feels sloppy and increases load times.
What I Want
It'd be great if Vite could be told to expose its copy of jQuery to the other non-module script tags. There might be an easy way to do this, but I'm not seeing it.
Thanks in advance!
I'm using nuxt(universal mode) with vuetify with very few components that are actually being used.
I also add a few css rules of my self.
I tried to configure treeshaking with extractCSS, I think it works for the js part, but I'm getting a 350KB css file.
(I think) as a result I'm also having FOUC since it takes time to load all that css.
any way around it?
Is there another css framework that will work better with nuxt ssr?
Thanks.
I am new to The SharePoint Framework (SPFx). I am trying to convert old Content Type Web Part into SPFx Web Part. Earlier we have used multiple css files and included into html page. But for SPFx Web Part, I got stuck for how to use more than one scss for one Web Part. I searched but found suggestions on how to give give names of scss for your Web Part but no where i found like it allows only one scss or something.
So i would like to know whether it is possible to have multiple scss file for one web part or not? And if yes then how?
This should be quite easy to accomplish. Just add a new .module.scss file to your solution and reference it with a unique identifier.
Example:
import styles from './Existing.module.scss'; // this is the one you already have
import additionalStyles from './Example.module.scss'; // your new module
Then you can reference these like <div className={additionalStyles.awesomeClass} />
I worked all day yesterday to finish a google cloud function to power an appointment maker vue component. The last step is actually UI using the returned object. I was planning on using the vuetify date/time pickers with allowed dates and times.
After spending much of today trying to add vuetify to an existing project to only use those to components, it is causing style errors with some classes(margin, etc) that are coming from main.sass.
I thought of adding a prefix to tailwind, but I don't have the time or inclination to go back to all of my components and files to add the prefix to all of my tailwind classes.
Is there something I can do to scope the vuetify classes/css so as not to cause problems outside of the two components I am trying to use?
Can I add the vuetify css after my tailwind is compiled and assembled so the tailwind classes win take precedent?
I don't have code to show as it is fairly straight forward. I thought the google calendar API would be the hardest part of this component, but it is proving to be the easier.
Tailwind allows you to prefix the generated classes in the configuration file. See https://tailwindcss.com/docs/configuration
I know this is too late to answer but I'm writing this for other people like me who came up with this problem.
In order to add Vuetify to an existing project which is using Tailwind CSS without CSS class conflicting, You just need to activate treeShake in Vuetify options.
For example in a Nuxt project, add the below snippet in nuxt.config.js:
export default {
// Other Configs
vuetify: {
treeShake: true
},
}
I am trying to use a mdc-component (say mdc-textfield) within a lit element. Looks like I have to import both css and js files into the element.
I'm quite unsure of how to import css into the lit-element.
BTW I use polymer serve without any preprocessors or compiler.
I recommend to wait for Material Component Web Components
But answering your question, to use MCD you need to use sass, then you will need a pre-compiler. Once you have compiled to CSS you can import it into your component:
const anyStyle = html`<style src="path/to/compiled/style.css"></style>`;
I recommend to use a watcher to automatically build the sass files while you are running polymer serve