How can vue-cli support optional SCSS, such as for themes?
I know you can import scss/css in a component, but how would you handle optional scss? They would need to be built standalone and imported.
Say I have a light.scss and a dark.scss. I want to be able to build them along with everything else and be output to an css folder.
As far as switching themes, I'm pretty sure I can get away with just replacing a link element in the head of the page with the theme css file. I just need to be able to build the css files in the first place.
I've attempted to make multiple entries for the files, and this appears to work, but each entry has a bogus JS file generated as well. I could probably just ignore the JS file, but it seems like there must be a better way.
vue.js webpack sass vue-cli vue-cli-3
asked Nov 25 '18 at 17:29
Buns of AluminumBuns of Aluminum
1,41231841
add a comment |
I know you can import scss/css in a component, but how would you handle optional scss? They would need to be built standalone and imported.
Say I have a light.scss and a dark.scss. I want to be able to build them along with everything else and be output to an css folder.
As far as switching themes, I'm pretty sure I can get away with just replacing a link element in the head of the page with the theme css file. I just need to be able to build the css files in the first place.
I've attempted to make multiple entries for the files, and this appears to work, but each entry has a bogus JS file generated as well. I could probably just ignore the JS file, but it seems like there must be a better way.
vue.js webpack sass vue-cli vue-cli-3
asked Nov 25 '18 at 17:29
Buns of AluminumBuns of Aluminum
1,41231841
add a comment |
I know you can import scss/css in a component, but how would you handle optional scss? They would need to be built standalone and imported.
Say I have a light.scss and a dark.scss. I want to be able to build them along with everything else and be output to an css folder.
As far as switching themes, I'm pretty sure I can get away with just replacing a link element in the head of the page with the theme css file. I just need to be able to build the css files in the first place.
I've attempted to make multiple entries for the files, and this appears to work, but each entry has a bogus JS file generated as well. I could probably just ignore the JS file, but it seems like there must be a better way.
vue.js webpack sass vue-cli vue-cli-3
asked Nov 25 '18 at 17:29
Buns of AluminumBuns of Aluminum
1,41231841
I know you can import scss/css in a component, but how would you handle optional scss? They would need to be built standalone and imported.
Say I have a light.scss and a dark.scss. I want to be able to build them along with everything else and be output to an css folder.
As far as switching themes, I'm pretty sure I can get away with just replacing a link element in the head of the page with the theme css file. I just need to be able to build the css files in the first place.
I've attempted to make multiple entries for the files, and this appears to work, but each entry has a bogus JS file generated as well. I could probably just ignore the JS file, but it seems like there must be a better way.
vue.js webpack sass vue-cli vue-cli-3
vue.js webpack sass vue-cli vue-cli-3
asked Nov 25 '18 at 17:29
Buns of AluminumBuns of Aluminum
1,41231841
asked Nov 25 '18 at 17:29
Buns of AluminumBuns of Aluminum
1,41231841
asked Nov 25 '18 at 17:29
Buns of AluminumBuns of Aluminum
1,41231841
asked Nov 25 '18 at 17:29
Buns of AluminumBuns of Aluminum
1,41231841
asked Nov 25 '18 at 17:29
Buns of AluminumBuns of Aluminum
1,41231841
1,41231841
add a comment |
add a comment |
0
active
oldest
votes
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%2f53470049%2fhow-can-vue-cli-support-optional-scss-such-as-for-themes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53470049%2fhow-can-vue-cli-support-optional-scss-such-as-for-themes%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
