vue.js - bind sass styling from one component to another - javascript

this question is about vue.js, that operates on a boilerplate that using webpack configuration.
i need to dynamically pass sass variables from component father to component son (for the simplicity of naming).
on component father i have access to $color variable from the style tag.
and i'm calling to son component using this html template:
// father component
<template>
<son></son>
</template>
<style lang='sass' scoped>
#import 'assets/sass/color';
</style>
imported sass variable, $color need to come from father and change the background of son
let's say son is just a simple div.
// son component
<template>
<div></div>
</template>
<style lang=sass scoped>
div {
width: 200px;
height: 200px;
}
</style>
what's the correct way to do it?

you can import sass and use binding like,
<p v-bind:style="[baseStyles, overrideStyles]">
baseStyles and overrideStyles
</p>
EDIT
or you can do something like
<template>
<div v-bind:class="$style.my_component">Hello</div>
</template>
<style module>
.my_component {
color: purple; // still the best color ever
}
</style>

Besides of your scoped stylings you could also use global ones in the same component which would get exposed to the child component. Just add a new style tag to your component, without using the scoped key.
Your component could look somehow like that.
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
Source

Related

Vue 3 get scss variable

I have some struggles with importing scss variable into my Vue 3 app.
I have gloabal variable defined in colors like $some-class-danger or $some-class-success.
So I would need to import only $some-class and add danger or success property dynamicly.
So for now I have something like:
<style scoped lang="scss">
#import "#/scss/variables/variables";
.drop-color{
color: $some-class-danger;
}
</style>
So this works, but I need it to have v-bind(label) and looks like:
<style scoped lang="scss">
#import "#/scss/variables/variables";
.drop-color{
color: $some-class- v-bind(label);
}
</style>
but it's not working that way, any ideas how to fix it?

How to Dynamically Import SCSS Stylesheets in Nuxt using an Environment Variable

We are running Nuxt in a monorepo and things are working well. We are utilizing a /base directory containing our reusable components and stylesheets, and each project has its own subdirectory within a /projects directory.
Our global variables/mixins are being added to the base nuxt.config.js via the #nuxtjs/style-resources module which we then extend and import into the project's own nuxt.config.js.
In our components, we are hoping to dynamically import a project-specific stylesheet using an environment variable. We currently have something like:
//component-name.vue
<template>
//Template things
</template>
<script>
export default {
data() {
return {
projectPrefix: process.env.PROJECT_PREFIX
}
}
}
}
</script>
<style lang="scss">
#import 'base/assets/styles/scss/_component-name.scss';
//We would like to import the JUST ONE of the following stylesheets based on projectPrefix
#import './projects/project-foo/assets/styles/scss/_component-name.scss';
#import './projects/project-bar/assets/styles/scss/_component-name.scss';
#import './projects/project-baz/assets/styles/scss/_component-name.scss';
...
</style>
At the moment, everything works fine in terms of the styles being displayed correctly per project. The problem is that we also include a bunch of unused styles in this way.
Does anyone know of a good solution for how we might be able to dynamically import a stylesheet based on an environment variable?
You could create a component for env variable. Something like:
<template>
<component-with-style-a v-if="projectPrefix === 'A'" />
<component-with-style-b v-else />
</template>
<script>
export default {
data() {
return {
projectPrefix: process.env.PROJECT_PREFIX
}
}
}
}
</script>

Vue custom import css (sass) file

In Vue I have a component something to below:
<template>
<div></div>
</template>
<style lang="scss">
.custom {
#import "http://example.com/assets/css/style.css";
}
</style>
I have an options.json file that can be used to set a custom CSS URL. So I can set the CSS URL to anything. How do I implement that?
Dreamcode
<style lang="scss">
.custom {
#import this.options.css;
}
</style>
I know my way around variables in Vue. The tricky part for me is that the are used inside <template> or <script>, not inside <style>.
<script>
import var1 + var2 + var3 + "style.css";
</script>
As far as I know, you can't use cross variables (script > style) in Vue.
If you need to have a style sheet from URL, I suggest using environment variables which might work.

Using stylus #import in vue js components

I wonder if it's possible from within the style part of a vue file to use stylus #import feature
Let's say i do have in my assets folder a funcs.stylfile containing this dummy function
add(a)
a + a
And in my App.vue i want to use that function
<template>
<div id="app">
<h1>{{ msg }}</h1>
</div
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style lang="stylus" scoped>
#import "../assets/funcs.styl"
h1
margin add(30px)
</style>
Works just fine thanks to #Potray
Seb
You should use the webpack stylus-loader.
npm i --save-dev stylus stylus-loader
Then inside your vue component use
<style lang="stylus"></style>
instead of the regular tag.
Hope this'll work for you :)
This is just an answer so the initial question can be closed.
You are (were) missing a quote mark in the #import line
Like #Potray points it out i did a simple error missing a quote in a line
It's fixed ;-)

Polymer share styles across elements

I need to share styles across multiple Polymer elements. Is it acceptable to create a "styles.html" file and then import that into my different elements or would this start to have performance implications as the app grows? I know for 0.5 there was a core-styles but it kind of seems unnecessary if imports will work just as well.
styles.html
<style>
button {
background: red;
}
</style>
my-button.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../styles/main-styles.html">
<link rel="import" href="../behaviors/mixins.html">
<dom-module id="my-button">
<template>
<button>{{text}}</button>
</template>
</dom-module>
<script>
Polymer({
is: 'my-button',
behaviors: [ButtonBehavior]
})
</script>
As suggested in discussion on issue logged in chromium to deprecate /deep/ and ::shadow selectors:
say your common styles are in a file called
common-style.css
In your component have a style tag that is like this
#import url( '/common-style.css' );
This inverts the control : instead of broadcasting your styles for
anyone to use, style consumers must know which styles they want and
actively request them, which helps avoid conflicts. With browser
caching, there's essentially no penalty to so many imports, in fact it
is likely faster than cascading the styles through multiple shadow
trees using piercers.
You can create a style.css and import it in your components by putting a css #import in your template.
There won't be multiple network calls, since browser is going to cache it when your first component loads and for subsequent components it will picked from cache.
We have been using webcomponents in our production apps for a while now using this technique since /deep/ has been deprecated and there has not been any signification performance difference.
You can use Polymer's shared styles. Create a document with your styles:
<dom-module id="shared-styles">
<template>
<style>
/* Your styles */
</style>
</template>
</dom-module>
And then import this to your elements and in their definitions add include="shared-styles" to the <style> tag.
Share styles by creating a dom-module for them, just like other custom elements. To include the shared styles in a custom element, use <style include="style-module-name">. Full example below.
shared-styles.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="shared-styles">
<template>
<style>
/* CSS goes here */
</style>
</template>
</dom-module>
some-element.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="some-element">
<template>
<style include="shared-styles">
/* Element specific styles go here */
</style>
<!-- HTML goes here -->
</template>
<script>
Polymer({
is: 'some-element',
properties: {
}
});
</script>
</dom-module>
As of Polymer 1.1, the polymer project authors recommend creating and importing a style module to address this issue.
To share style declarations between elements, you can package a set of style declarations inside a element. In this section, a holding styles is called a style module for convenience.
A style module declares a named set of style rules that can be imported into an element definition, or into a custom-style element.
See more: https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules

Categories

Resources