I'm using Nuxt and I have an external scss file, how can I access assets path to use the background-image property?
I have already tried to use this background-image: url("~assets/images/myurl.png") but it didn't work.
I tried using the inline style and it worked but is there any other way without using the inline style?
Related
If I include images from the assets folder(in src besides App.vue) it will build and run but then not work when changing it with javascript.Eg.:
background-image: url('../assets/img/bg_b.png');
// If I than change it with javascript it doesn't work
background-image: url('../assets/img/bg_w.png');
// I then need to use it like this
background-image: url('/img/bg_w.png');
I want to use images from my public folder in vue so the line is the same in javascript and vue. How do I make using an image look the same in vue and browser:
background-image: url('/img/bg_w.png');
If the image URL is /img/bg_w.png, the file should be in:
public/img/bg_w.png
demo
I am using an vue-cli-service to build a web component. All styles referenced in this component are always inlined into the javascript file.
vue-cli-service build --target wc --name component-name --inline-vue ./src/components/someComponent.vue
Is there a way to force Vue to pull out component CSS into a separate file instead of inlining it into the dist/component-name.js file?
Alternatively, is there an easy way to allow external users to override the Shadow DOM styles?
Unfortunately I don't believe there's an automated way to do this without writing a custom webpack plugin. You're going to have to migrate the CSS manually.
If you're using webpack, you can take all your component CSS and move it into a separate file.
From there, you can include it in your main.js file using either a require or an import:
import './css/styles.css';
If you're not using webpack or you want to include CSS files only in specific components then you can import the file within the component itself.
Simply create a <style> block and import the CSS within it:
<style>
#import './css/styles.css';
</style>
You could use this <style> block approach globally too by adding it to your App.vue file.
Is there a config option in Vue to make a separate CSS file?
I tried using the webpack plugin to extract CSS. However, Vue still loads the same styles inline.
Is there something I’m missing about Vue? Or is this purely my misunderstanding of webpack?
webpack.config.js
I need to develop a plugin for Moodle, and i need to have some js and css files in plugin. But i have the next problem - how to work with them from installed plugin? Of course, i can hardcode their path via to moodle structure, but it's a very dirty and bad way. Also, i know that i can place all js and css code inline, but i think that it's a bad decision too. Is there a built-in way to serve assets from plugin? I tried to find it in documentations, but found nothing.
Thanks
I assume you want to know how to include CSS and JS files into your plugin.
You can include a JS file via the command:
$PAGE->requires->js( /relative/path/your_script.js');
You can then call a JS function once the page has been downloaded with the command:
$PAGE->requires->js_init_call ( your_JS_function_name, array_of_parameters_here, bool: on DOM ready);
For example:
$PAGE->requires->js_init_call('init', array($USER->lang), true);
Be sure to make the $PAGE available with global $PAGE;, first.
Your CSS file can be named styles.css and put into the root folder of your plugin. The file will be automatically read by the system and included. It will take precedence over (will overwrite the settings of) the system CSS files. After that you will have to reload the theme caches.
How can I edit in CSS.
In Stencil framework can't found .css file.
In assets folder only found .scss file.
I want to edit in theme.css
How can I edit ?
Can any body help me ?
If you are developing a stencil theme locally and have ran stencil start it watches your SCSS files. So one option is you could add any custom CSS you want to the /assets/scss/theme.scss file.
Another option is you could create your own SCSS file, say for example custom.scss, and place it in /assets/scss/. Then import it to your theme.scss like this #import "custom" . Make sure you place it at the bottom of your theme.scss file so it overrides any css you are wishing to alter.
the .scss files are the css files. The stencil framework uses scss instead of the regular css.
This link should help guide you on how to edit the files: https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor
the .scss files are the css files. The stencil framework uses scss instead of the regular css.
Please check this path /assets/scss/theme.scss