Vue not applying style classHow to change an element's class with JavaScript?How can I select an element with multiple classes in jQuery?What is the difference between call and apply?What is the best way to conditionally apply a class?Is it possible to apply CSS to half of a character?Webpack not extracting CSS into files from vendor vue componentsHow to fix HTML file comments not being ignored by Webpack Dev Server?How include bootstrap and jquery to vue webpack-simple template?Error importing css in vue js single file componentHow to extract style from external vue library imported in project?
How much can I judge a company based on a phone screening?
Bringing Power Supplies on Plane?
How come the Rambam forbids picking up money found in the street?
Boss wants me to ignore a software API license
Chunk + Enumerate a list of digits
Good textbook for queueing theory and performance modeling
How to not forget things?
Scam? Phone call from "Department of Social Security" asking me to call back
Is there a way to proportionalize fixed costs in a MILP?
How do I ask for 2-3 days per week remote work in a job interview?
Why aren’t there water shutoff valves for each room?
What would it take to get a message to another star?
Will using a resistor in series with a LED to control its voltage increase the total energy expenditure?
How would you translate this? バタコチーズライス
What are the odds of rolling specific ability score totals in D&D?
When did Bilbo and Frodo learn that Gandalf was a Maia?
Are employers legally allowed to pay employees in goods and services equal to or greater than the minimum wage?
Should I leave building the database for the end?
Why does the cable resistance jump from a low value to high value at a particular frequency?
Does Stone Golem skin count as “a point on a stone surface” for the Passwall spell?
How was the murder committed?
Why is the result of ('b'+'a'+ + 'a' + 'a').toLowerCase() 'banana'?
What is the most difficult concept to grasp in Calculus 1?
What can Amex do if I cancel their card after using the sign up bonus miles?
Vue not applying style class
How to change an element's class with JavaScript?How can I select an element with multiple classes in jQuery?What is the difference between call and apply?What is the best way to conditionally apply a class?Is it possible to apply CSS to half of a character?Webpack not extracting CSS into files from vendor vue componentsHow to fix HTML file comments not being ignored by Webpack Dev Server?How include bootstrap and jquery to vue webpack-simple template?Error importing css in vue js single file componentHow to extract style from external vue library imported in project?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I have single-file components that are built with the following Webpack configuration:
const VueLoaderPlugin = require('vue-loader');
module.exports = {
module:
rules: [
test: /.vue$/,
use: 'vue-loader'
,
jpg,
test: /.css$/,
use: [
'vue-style-loader',
loader: 'css-loader',
options:
modules: true,
localIdentName: '[local]_[hash:base64:8]'
]
]
,
plugins: [
new VueLoaderPlugin()
]
I use the <style scoped> tag to style my components. This works with tag selectors (e.g. nav), but class selectors (e.g. .content) result in no styling. The DOM contains the relevant classes, but the generated dist/main.js file only contains a content_xgKyi9qt[data-v-ab83c772] selector, which is not applied, as the component only has the raw content class.
javascript css vue.js webpack
asked Mar 27 at 11:21
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
add a comment |
I have single-file components that are built with the following Webpack configuration:
const VueLoaderPlugin = require('vue-loader');
module.exports = {
module:
rules: [
test: /.vue$/,
use: 'vue-loader'
,
jpg,
test: /.css$/,
use: [
'vue-style-loader',
loader: 'css-loader',
options:
modules: true,
localIdentName: '[local]_[hash:base64:8]'
]
]
,
plugins: [
new VueLoaderPlugin()
]
I use the <style scoped> tag to style my components. This works with tag selectors (e.g. nav), but class selectors (e.g. .content) result in no styling. The DOM contains the relevant classes, but the generated dist/main.js file only contains a content_xgKyi9qt[data-v-ab83c772] selector, which is not applied, as the component only has the raw content class.
javascript css vue.js webpack
asked Mar 27 at 11:21
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
share gitrepo link to your code
– divine
Mar 27 at 11:33
Share image of console where we can see HTML element and styles together.
– Varit J Patel
Mar 27 at 12:16
add a comment |
I have single-file components that are built with the following Webpack configuration:
const VueLoaderPlugin = require('vue-loader');
module.exports = {
module:
rules: [
test: /.vue$/,
use: 'vue-loader'
,
jpg,
test: /.css$/,
use: [
'vue-style-loader',
loader: 'css-loader',
options:
modules: true,
localIdentName: '[local]_[hash:base64:8]'
]
]
,
plugins: [
new VueLoaderPlugin()
]
I use the <style scoped> tag to style my components. This works with tag selectors (e.g. nav), but class selectors (e.g. .content) result in no styling. The DOM contains the relevant classes, but the generated dist/main.js file only contains a content_xgKyi9qt[data-v-ab83c772] selector, which is not applied, as the component only has the raw content class.
javascript css vue.js webpack
asked Mar 27 at 11:21
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
I have single-file components that are built with the following Webpack configuration:
const VueLoaderPlugin = require('vue-loader');
module.exports = {
module:
rules: [
test: /.vue$/,
use: 'vue-loader'
,
jpg,
test: /.css$/,
use: [
'vue-style-loader',
loader: 'css-loader',
options:
modules: true,
localIdentName: '[local]_[hash:base64:8]'
]
]
,
plugins: [
new VueLoaderPlugin()
]
I use the <style scoped> tag to style my components. This works with tag selectors (e.g. nav), but class selectors (e.g. .content) result in no styling. The DOM contains the relevant classes, but the generated dist/main.js file only contains a content_xgKyi9qt[data-v-ab83c772] selector, which is not applied, as the component only has the raw content class.
javascript css vue.js webpack
javascript css vue.js webpack
asked Mar 27 at 11:21
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
asked Mar 27 at 11:21
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
asked Mar 27 at 11:21
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
asked Mar 27 at 11:21
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
asked Mar 27 at 11:21
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
6287 silver badges18 bronze badges
share gitrepo link to your code
– divine
Mar 27 at 11:33
Share image of console where we can see HTML element and styles together.
– Varit J Patel
Mar 27 at 12:16
add a comment |
share gitrepo link to your code
– divine
Mar 27 at 11:33
Share image of console where we can see HTML element and styles together.
– Varit J Patel
Mar 27 at 12:16
share gitrepo link to your code
– divine
Mar 27 at 11:33
share gitrepo link to your code
– divine
Mar 27 at 11:33
Share image of console where we can see HTML element and styles together.
– Varit J Patel
Mar 27 at 12:16
Share image of console where we can see HTML element and styles together.
– Varit J Patel
Mar 27 at 12:16
add a comment |
1 Answer
1
active
oldest
votes
Turns out the vue-style-loader options that I used are causing the name mangling. I have decided to switch from <style scoped> to <style module> and use the <div :class="$style.content"> syntax instead.
This causes the class of the element to correspond to the mangled name and provides a level of isolation for styling.
answered Mar 27 at 21:34
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
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%2f55375986%2fvue-not-applying-style-class%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Turns out the vue-style-loader options that I used are causing the name mangling. I have decided to switch from <style scoped> to <style module> and use the <div :class="$style.content"> syntax instead.
This causes the class of the element to correspond to the mangled name and provides a level of isolation for styling.
answered Mar 27 at 21:34
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
add a comment |
Turns out the vue-style-loader options that I used are causing the name mangling. I have decided to switch from <style scoped> to <style module> and use the <div :class="$style.content"> syntax instead.
This causes the class of the element to correspond to the mangled name and provides a level of isolation for styling.
answered Mar 27 at 21:34
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
add a comment |
Turns out the vue-style-loader options that I used are causing the name mangling. I have decided to switch from <style scoped> to <style module> and use the <div :class="$style.content"> syntax instead.
This causes the class of the element to correspond to the mangled name and provides a level of isolation for styling.
answered Mar 27 at 21:34
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
Turns out the vue-style-loader options that I used are causing the name mangling. I have decided to switch from <style scoped> to <style module> and use the <div :class="$style.content"> syntax instead.
This causes the class of the element to correspond to the mangled name and provides a level of isolation for styling.
answered Mar 27 at 21:34
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
answered Mar 27 at 21:34
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
answered Mar 27 at 21:34
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
answered Mar 27 at 21:34
Philipp PloderPhilipp Ploder
6287 silver badges18 bronze badges
6287 silver badges18 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
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%2f55375986%2fvue-not-applying-style-class%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
share gitrepo link to your code
– divine
Mar 27 at 11:33
Share image of console where we can see HTML element and styles together.
– Varit J Patel
Mar 27 at 12:16