I've been using vuetify as frontend, but since I moved to nuxt. All styles are displayed within html page.
Is there a way to move vuetify styles to separate css files?
You need to use extractCSS property from nuxt.config
export default {
build :{
extractCSS: true
}
}
Related
I want to style a component with my own custom className that has certain properties. Tailwind lets you do this through App.css, but in a react native application there is none. How do you add say a '.title' class to tailwind with certain properties?
.title {
font-size: 24px
font-weight: 800
}
Applying it to Text JSX object:
<Text className="title">Title Text!</Text>
I figured out this method of styling multiple of the same components. Nativewind and Tailwind suggest not using this method, but it works for both.
In your tailwind.config.js file, add the following line of code above your module.exports:
const plugin = require("tailwindcss/plugin");
module.exports = {...}
Then in your plugins list, add:
plugin(function ({ addComponents }) {
addComponents({
".title": {
fontWeight: 800,
fontSize: 24,
},
});
}),
Make sure your styling uses the same property names as react-native, and NOT css (fontWeight vs font-weight). Restart your server, and it should work!
You can use twrnc npm package for this. Install it from here.
Import it like this in the file at the top.
import tw from "twrnc";
And use it like this
<Text style={tw` text-2xl font-extrabold`}>Title Text!</Text>
I have a project which uses MaterialDesignIcons in Nuxt with Vuetify.
Today I switch completely with all tags to the JS loading type:
https://vuetifyjs.com/en/features/icon-fonts/#material-design-icons-js-svg
<v-icon>{{ mdiCheck }}</v-icon>
(...)
import { mdiCheck, mdiCart } from '#mdi/js'
(...)
data() {
return {
mdiCheck,
mdiCart,
my problem is, that after yarn build / start the loading of the css file from cdn don't stop.
How can I see why this is still loaded and how to fix this?
In Head HTML:
It's a problem with the nuxt plugin for vuetify.
As you can see in their docs they by default load the Roboto font and Material Design Icons. Difficult to spot but easy to fix:
In nuxt.config.js set defaultAssets: false in the vuetify configuration:
vuetify: {
defaultAssets: false,
icons: {
iconfont: 'mdiSvg',
}
}
I'm trying to build a simple mail editor in vue (and vuex). Once everything is edited out of some input, i'd like to inline some scss files into the resulting html, using juice.
If i try to import one css using webpack raw-loader,
import css from '!raw-loader!./../assets/sass/test.css';
then i can pass the css value to juice
let result=juice.inlineContent(html,css)
and then injecting with v-html (see below) in one of my component to render the email.
Whitout using the raw-loader, the css will be applied to everything, beeing imported.
If i try to use the raw-loader with a scss file, it's not compiled - rightly - properly.
import css from '!raw-loader!./../assets/sass/main.scss';
I'm quite new to vue and webpack, so, is there something/somewhere i can dig in to understand a way to preprocess a scss file and then pass it as a string to vue, without applying it as style in vue?
I've also tried to scope some css to a component in which i use a v-html tag (and where the inlined html should go)
<template>
<div v-html="render" />
</template>
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["render"]),
},
};
</script>
<style lang="scss" scoped>
table {
border: 1px solid red;
}
</style>
At first in the value (the getters) ther's no table, but when i add it to the component (with the editor) the style it's not rendered at all, as if the component is not re-rendered. That's the reason i decided to inline the css before injecting in the DOM, instead of doing it after some action - like a click on a button.
I've also tried using >>> but with no luck. I know this is not the main question, just a "side quest", but i'm just learning
import css from '!raw-loader!sass-loader!./../assets/sass/main.scss';
It first compile the sass and then import it as a row string... easy peasy
I'm currently trying to use Nav with react-router. The default behavior reloads the page, so I'm trying to use the Link component from react-router-dom.
It's quite difficult to preserve the default styling when overriding linkAs.
Is there any global way to override link navigation behavior?
Like defining a global link render function, which I can then set to render the Link component from react-router-dom?
Yes, it's possible!
2 things are required:
Make a wrapper component that translates the Nav API to react-router-dom links.
Specify the linkAs prop to the Nav component.
Wrapper component
This is a simple component that creates a react-router-dom link while using styles from Fabric:
import { Link } from "react-router-dom";
const LinkTo = props => {
return (
<Link to={props.href} className={props.className} style={props.style}>
{props.children}
</Link>
);
};
Specify component for use in Nav
<Nav groups={links} linkAs={LinkTo} />
Have also created a full working example at https://codesandbox.io/s/xenodochial-wozniak-y10tr?file=/src/index.tsx:605-644
I understand that with 'scoped' i can isolate css stylings to a component, so What's the difference between scoped and module in vuejs components? When should I use module over scoped?
According to the docs:
CSS Modules as an alternative for simulated scoped CSS
So, it's an alternative - It's also worth noting that scoped on a parent component means child components can't see the CSS but with module you can access this.$parent.$style.red to gain access to the styling.
It does however have the added advantage that you can then access your CSS from within your code:
<style module>
.red {
color: red;
}
</style>
<script>
export default {
created () {
console.log(this.$style.red)
}
}
</script>