What is the use of images:{} inside variations in config.json in stencil bigcommerce?
Related
After I created a theme in sylius my icons are not loading. But when I include the original path of style.css they appear. What am I doing wrong.
I have followed this link as a reference:
How to add CSS files on a Sylius theme?.
Screenshot attached
In the style.css file in your theme folder. Change the src url of the icons in #font-face.
For example:
Add fonts/icons.eotinstead of themes/default/assets/fonts/icons.eot
Do the same thing for every font file and images.
I'm using vue cli 3, Vuetify. My back-end programmer asked me that put my css, js, and img file in static folder for him. How can I do? I cannot find webpack.config.js file at vue cli 3. some guys said use vue.config.js file, but I still don't know how to solve this problem.
thank you.
this link is build result. I want to put css, img, js files in one static folder.
Take a look at Public Folder for Vue CLI 3. To quote the docs
Any static assets placed in the public folder will simply be copied and not go through webpack. You need to reference them using absolute paths.
All you would need to do is place your css, js, images in your public folder
How can i add new css and js file in my BC Stencil Theme ?
and i cant find my all theme folder in cyberduck! my theme name is Cornerstone Light.
The legacy theme platform (Blueprint) used Cyberduck to upload theme files, but Stencil uses Stencil CLI developer tools. If your store has a Stencil theme applied, you won't see a template folder in WebDAV.
First, install the prerequisites for your OS and install Stencil CLI:
https://stencil.bigcommerce.com/docs/installing-and-launching-stencil-1
Download your theme so you can work on it locally. CSS files can be added to assets/scss and js files can be installed with a package manager like npm, or uploaded to assets/js.
After uploading your custom.scss file to the assets/scss directory, you can import it into the default scss file (theme.scss) with an #import statement:
#import "custom";
Here are links to the documentation on adding CSS and js files to your theme:
https://stencil.bigcommerce.com/docs/custom-sass-functions#Compiling
https://stencil.bigcommerce.com/docs/js-101
You might also find this BC Community discussion helpful:
https://forum.bigcommerce.com/s/question/0D51B00003sRDg7SAG/custom-css-in-big-commerce
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
For BigCommerce stencil themes having references to assets, the docs do not mention CSS and SASS URL references.
Is there a specialized SASS function for referencing images in the asserts directory, in BigCommerce stencil themes? Or, will CDN reference strings be converted automatically?
If you are referencing images that are bundled with your theme, you can use a path like ../images/myimage.png and it will load from the CDN. If you are referencing images from outside of the theme, there is no SASS function and you will need to hardcode the CDN URL (or use inline css to utilize the CDN handlebars helper).
Alyss's answer helped, in your CSS you can reference theme assets with the path he provided:
../images/myimage.png
For inline, you can refence them by using the CDN handlebars syntax:
<link href="{{cdn '/assets/css/invoice.css'}}" rel="stylesheet">
More info here:
https://stencil.bigcommerce.com/docs/css-resources