With Vue, how would I load different CSS files depending on some logic / data?
I'm trying to enable different theming options for my app that users can choose from.
I know that I could switch out a class on the <body> tag, but that would make the CSS far messier than just using two different .scss files with different variable values.
Any ideas?
javascript vue.js sass
asked Nov 13 '18 at 23:00
jetlejjetlej
1,99032135
add a comment |
I'm trying to enable different theming options for my app that users can choose from.
I know that I could switch out a class on the <body> tag, but that would make the CSS far messier than just using two different .scss files with different variable values.
Any ideas?
javascript vue.js sass
asked Nov 13 '18 at 23:00
jetlejjetlej
1,99032135
add a comment |
I'm trying to enable different theming options for my app that users can choose from.
I know that I could switch out a class on the <body> tag, but that would make the CSS far messier than just using two different .scss files with different variable values.
Any ideas?
javascript vue.js sass
asked Nov 13 '18 at 23:00
jetlejjetlej
1,99032135
I'm trying to enable different theming options for my app that users can choose from.
I know that I could switch out a class on the <body> tag, but that would make the CSS far messier than just using two different .scss files with different variable values.
Any ideas?
javascript vue.js sass
javascript vue.js sass
asked Nov 13 '18 at 23:00
jetlejjetlej
1,99032135
asked Nov 13 '18 at 23:00
jetlejjetlej
1,99032135
asked Nov 13 '18 at 23:00
jetlejjetlej
1,99032135
asked Nov 13 '18 at 23:00
jetlejjetlej
1,99032135
asked Nov 13 '18 at 23:00
jetlejjetlej
1,99032135
1,99032135
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
I can't think of an elegant way to do this. If you're using single file components (SFCs) you can make use of CSS modules. From the vue-loader documentation ..
You can have more than one
<style>tags in a single*.vue
component. To avoid injected styles to overwrite each other, you can
customize the name of the injected computed property by giving the
module attribute a value
<style module="a">
/* identifiers injected as a */
</style>
<style module="b">
/* identifiers injected as b */
</style>
So you might have a style tag for your common styling, and other style tags for theme specific styling. You can then decide which module/style-tag a class is picked from with a computed property that uses your logic to return the module's name.
answered Nov 14 '18 at 0:33
Husam IbrahimHusam Ibrahim
2,753315
1
As always you give a wonderful solutions
– Boussadjra Brahim
Nov 14 '18 at 1:00
1
@Boussadjra Thanks. I had to look this up myself so it's not like I knew the answer. Can't complain though as I learned something in the process. Interesting question :)
– Husam Ibrahim
Nov 14 '18 at 1:08
add a comment |
Can't think of any Vue-Specific approach, but in plain Javascript
const styleEl = document.createElement("style");
styleEl.innerHTML = "@import 'alternate.stylesheet.css'";
document.head.appendChild(this.styleEl);
(Obviously, you'd load the normal stylesheet by default, and the alternate stylesheet would need to completely override any rules in the normal stylesheet that were not desired.)
answered Nov 14 '18 at 0:55
Stephen ThomasStephen Thomas
9,75321733
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290787%2fwith-vue-how-would-i-load-different-css-files-depending-on-some-logic-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I can't think of an elegant way to do this. If you're using single file components (SFCs) you can make use of CSS modules. From the vue-loader documentation ..
You can have more than one
<style>tags in a single*.vue
component. To avoid injected styles to overwrite each other, you can
customize the name of the injected computed property by giving the
module attribute a value
<style module="a">
/* identifiers injected as a */
</style>
<style module="b">
/* identifiers injected as b */
</style>
So you might have a style tag for your common styling, and other style tags for theme specific styling. You can then decide which module/style-tag a class is picked from with a computed property that uses your logic to return the module's name.
answered Nov 14 '18 at 0:33
Husam IbrahimHusam Ibrahim
2,753315
1
As always you give a wonderful solutions
– Boussadjra Brahim
Nov 14 '18 at 1:00
1
@Boussadjra Thanks. I had to look this up myself so it's not like I knew the answer. Can't complain though as I learned something in the process. Interesting question :)
– Husam Ibrahim
Nov 14 '18 at 1:08
add a comment |
I can't think of an elegant way to do this. If you're using single file components (SFCs) you can make use of CSS modules. From the vue-loader documentation ..
You can have more than one
<style>tags in a single*.vue
component. To avoid injected styles to overwrite each other, you can
customize the name of the injected computed property by giving the
module attribute a value
<style module="a">
/* identifiers injected as a */
</style>
<style module="b">
/* identifiers injected as b */
</style>
So you might have a style tag for your common styling, and other style tags for theme specific styling. You can then decide which module/style-tag a class is picked from with a computed property that uses your logic to return the module's name.
answered Nov 14 '18 at 0:33
Husam IbrahimHusam Ibrahim
2,753315
1
As always you give a wonderful solutions
– Boussadjra Brahim
Nov 14 '18 at 1:00
1
@Boussadjra Thanks. I had to look this up myself so it's not like I knew the answer. Can't complain though as I learned something in the process. Interesting question :)
– Husam Ibrahim
Nov 14 '18 at 1:08
add a comment |
I can't think of an elegant way to do this. If you're using single file components (SFCs) you can make use of CSS modules. From the vue-loader documentation ..
You can have more than one
<style>tags in a single*.vue
component. To avoid injected styles to overwrite each other, you can
customize the name of the injected computed property by giving the
module attribute a value
<style module="a">
/* identifiers injected as a */
</style>
<style module="b">
/* identifiers injected as b */
</style>
So you might have a style tag for your common styling, and other style tags for theme specific styling. You can then decide which module/style-tag a class is picked from with a computed property that uses your logic to return the module's name.
answered Nov 14 '18 at 0:33
Husam IbrahimHusam Ibrahim
2,753315
I can't think of an elegant way to do this. If you're using single file components (SFCs) you can make use of CSS modules. From the vue-loader documentation ..
You can have more than one
<style>tags in a single*.vue
component. To avoid injected styles to overwrite each other, you can
customize the name of the injected computed property by giving the
module attribute a value
<style module="a">
/* identifiers injected as a */
</style>
<style module="b">
/* identifiers injected as b */
</style>
So you might have a style tag for your common styling, and other style tags for theme specific styling. You can then decide which module/style-tag a class is picked from with a computed property that uses your logic to return the module's name.
answered Nov 14 '18 at 0:33
Husam IbrahimHusam Ibrahim
2,753315
answered Nov 14 '18 at 0:33
Husam IbrahimHusam Ibrahim
2,753315
answered Nov 14 '18 at 0:33
Husam IbrahimHusam Ibrahim
2,753315
answered Nov 14 '18 at 0:33
Husam IbrahimHusam Ibrahim
2,753315
2,753315
1
As always you give a wonderful solutions
– Boussadjra Brahim
Nov 14 '18 at 1:00
1
@Boussadjra Thanks. I had to look this up myself so it's not like I knew the answer. Can't complain though as I learned something in the process. Interesting question :)
– Husam Ibrahim
Nov 14 '18 at 1:08
add a comment |
1
As always you give a wonderful solutions
– Boussadjra Brahim
Nov 14 '18 at 1:00
1
@Boussadjra Thanks. I had to look this up myself so it's not like I knew the answer. Can't complain though as I learned something in the process. Interesting question :)
– Husam Ibrahim
Nov 14 '18 at 1:08
1
1
As always you give a wonderful solutions
– Boussadjra Brahim
Nov 14 '18 at 1:00
As always you give a wonderful solutions
– Boussadjra Brahim
Nov 14 '18 at 1:00
1
1
@Boussadjra Thanks. I had to look this up myself so it's not like I knew the answer. Can't complain though as I learned something in the process. Interesting question :)
– Husam Ibrahim
Nov 14 '18 at 1:08
@Boussadjra Thanks. I had to look this up myself so it's not like I knew the answer. Can't complain though as I learned something in the process. Interesting question :)
– Husam Ibrahim
Nov 14 '18 at 1:08
add a comment |
Can't think of any Vue-Specific approach, but in plain Javascript
const styleEl = document.createElement("style");
styleEl.innerHTML = "@import 'alternate.stylesheet.css'";
document.head.appendChild(this.styleEl);
(Obviously, you'd load the normal stylesheet by default, and the alternate stylesheet would need to completely override any rules in the normal stylesheet that were not desired.)
answered Nov 14 '18 at 0:55
Stephen ThomasStephen Thomas
9,75321733
add a comment |
Can't think of any Vue-Specific approach, but in plain Javascript
const styleEl = document.createElement("style");
styleEl.innerHTML = "@import 'alternate.stylesheet.css'";
document.head.appendChild(this.styleEl);
(Obviously, you'd load the normal stylesheet by default, and the alternate stylesheet would need to completely override any rules in the normal stylesheet that were not desired.)
answered Nov 14 '18 at 0:55
Stephen ThomasStephen Thomas
9,75321733
add a comment |
Can't think of any Vue-Specific approach, but in plain Javascript
const styleEl = document.createElement("style");
styleEl.innerHTML = "@import 'alternate.stylesheet.css'";
document.head.appendChild(this.styleEl);
(Obviously, you'd load the normal stylesheet by default, and the alternate stylesheet would need to completely override any rules in the normal stylesheet that were not desired.)
answered Nov 14 '18 at 0:55
Stephen ThomasStephen Thomas
9,75321733
Can't think of any Vue-Specific approach, but in plain Javascript
const styleEl = document.createElement("style");
styleEl.innerHTML = "@import 'alternate.stylesheet.css'";
document.head.appendChild(this.styleEl);
(Obviously, you'd load the normal stylesheet by default, and the alternate stylesheet would need to completely override any rules in the normal stylesheet that were not desired.)
answered Nov 14 '18 at 0:55
Stephen ThomasStephen Thomas
9,75321733
answered Nov 14 '18 at 0:55
Stephen ThomasStephen Thomas
9,75321733
answered Nov 14 '18 at 0:55
Stephen ThomasStephen Thomas
9,75321733
answered Nov 14 '18 at 0:55
Stephen ThomasStephen Thomas
9,75321733
9,75321733
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290787%2fwith-vue-how-would-i-load-different-css-files-depending-on-some-logic-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
