🧩 Plasmo Developers•2y ago

Yes you can use the normal ` style ` tag

Yes, you can use the normal <style> tag in Vue with Plasmo. Plasmo offers first-class support for Vue, making it easy to build browser extensions using Vue components. To use the <style> tag in Vue with Plasmo, you can define your styles directly in the Vue component's style section. Here's an example:

<template>
  <div>
    <h1>Hello, Plasmo!</h1>
    <p>This is a Vue component with inline styles.</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
}
</script>

<style>
h1 {
  color: red;
}

p {
  font-size: 16px;
}
</style>

<template>
  <div>
    <h1>Hello, Plasmo!</h1>
    <p>This is a Vue component with inline styles.</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
}
</script>

<style>
h1 {
  color: red;
}

p {
  font-size: 16px;
}
</style>

In this example, the styles defined within the <style> tag will be scoped to the component, ensuring that they only apply to the elements within the component's template. You can also use CSS preprocessors like SCSS or LESS in Vue components with Plasmo. Simply install the necessary dependencies and configure your build tool (e.g., Webpack) to process the CSS preprocessor files. Plasmo will handle the build process and include the processed CSS in your extension. For example, if you want to use SCSS in your Vue component, you can install the sass package:

npm install sass --save-dev

npm install sass --save-dev

Then, you can use SCSS syntax within the <style> tag:

<style lang="scss">
$primary-color: blue;

h1 {
  color: $primary-color;
}

p {
  font-size: 16px;
}
</style>

<style lang="scss">
$primary-color: blue;

h1 {
  color: $primary-color;
}

p {
  font-size: 16px;
}
</style>

Plasmo will automatically process the SCSS code and include the resulting CSS in your extension. In summary, you can use the normal <style> tag in Vue components with Plasmo. Additionally, you can leverage CSS preprocessors like SCSS or LESS by configuring your build tool. Plasmo will handle the build process and include the processed CSS in your extension.

2 Replies

Joshua Perk•2y ago

!question How come it doesn't seem like CSS rules applied to the #plasmo-shadow-container are working? Specfically, lowering the z-index.

PallasOP•2y ago

Something went wrong.

Gaming

Programming

Yes you can use the normal ` style ` tag