I have an error when doing the custom theme build, I get the following error when I run the following command bin/console gold:assets:build -- theme: https://i.postimg.cc/zBxLSXYP/Screenshot-20210928-175918.jpg
And the code I added was the following:
src/oro/Bundle/ThemeBundle/Resources/config/oro/Bundle.yml:
bundles:
- { name: oroBundle/ThemeBundle/ThemeBundle, priority: 10 }
src/oro/Bundle/Bundle/ThemeBundle/Resources/views/layouts/theme/config/assets.yml.
styles:
inputs:
- bundles/ThemeBundle/theme/scss/settings/global-settings.scss
- bundles/ThemeBundle/theme/scss/variables/top-bar-config.scss
- bundles/ThemeBundle/theme/scss/styles.scss
output: css/styles.css
src/oro/Bundle/ThemeBundle/Resources/views/layouts/theme/theme.yml
parent: default
logo: bundles/themeBundle/theme/images/logo.svg
icon: bundles/themeBundle/theme/favicons/favicon.ico
tag: My Company Marketplace
description: My Company Marketplace theme.
groups: [commerce]
src/oro/Bundle/ThemeBundle/oroThemeBundle.php:
<?php
namespace oroThemeBundle;
use Symfony\Component\HttpKernel\Bundle\Bundle;
class OroThemeBundle extends Bundle
{
}
In the sccs files I have the following:
src/oro/Bundle/ThemeBundle/Resources/public/theme/scss/components/top-bar.scss:
/* #theme: theme; */
.topbar {
background: $top-bar-background;
}
src/oro/Bundle/ThemeBundle/Resources/public/theme/scss/settings/_colors.scss:
/* #theme: theme; */
$custom-color-palette: (
"primary": (
"primary": #0165ad,
"base": #fd302b,
"light": #ff7a76,
"dark": #ce0500,
),
);
$color palette: map_merge($color_palette, $custom_color_palette);
src/gold/Bundle/ThemeBundle/Resources/public/theme/scss/variables/top-bar-config.scss:
/* #theme: theme; */
$top-bar-font-size: 14px;
$top-bar-background: get-color('primary', 'main');
The issue is in the directory structure and namespace mismatch.
With the current structure, you have to change the oroThemeBundle.php class namespace to oro/Bundle/ThemeBundle
and reuse it in the bundles.yml file
bundles:
- { name: oro/Bundle/ThemeBundle/OroThemeBundle, priority: 10 }
Also, pay attention that the PHP class name must match the filename, so the oroThemeBundle.php file should be renamed to OroThemeBundle.php.
This is forced by PSR-4 Autoloader standard: https://www.php-fig.org/psr/psr-4/
Related
I am using the Tailwind CLI installation and all the files work except the PHP files.
So I decided to try adding in my TailwindCSS configuration the .php extension and then tried to connect to the page with the Live Server but no the page was not using Tailwind.
Here is my tailwind.config.js:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,php}"],
theme: {
extend: {},
},
plugins: [],
}
Ok so i manage to make it work if your .php file is located on the root directory your tailwind config must look like this.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,php}"],
theme: {
extend: {},
},
plugins: [],
}
then on the portion where you have to link your output.css on your html head section you must include the ./
<link href="./dist/output.css" rel="stylesheet">
Or to validate open your dev tool network tab and check if output.css returns http response 200
I'm trying to compile a webcomponent based on the monaco editor (in a lit element context). Having tried a lot of options I now have got the result down to two files
rmx-monaco.abc123.js
style.css
My top priority is to get rid of the hash (abc123), but I would also like to get down to a single file with the js and css in. Thanks in advance
My config reads:
import { resolve } from "path";
export default defineConfig({
base: "/",
build: {
rollupOptions: {
input:
// main: resolve(__dirname, "index.html"),
resolve(__dirname, "src/rmx-monaco.ts"),
output: {
// Prevent vendor.js being created
manualChunks: undefined,
// chunkFileNames: "zzz-[name].js",
// this got rid of the hash on style.css
assetFileNames: "assets/[name].[ext]",
},
},
// Prevent vendor.css being created
cssCodeSplit: false,
// prevent some warnings
chunkSizeWarningLimit: 60000,
},
});
My js entry files has these lines
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
import { languages } from "monaco-editor/esm/vs/editor/editor.api";
import styles from "monaco-editor/min/vs/editor/editor.main.css";
(I can add more if it would help)
I needed to add output: {entryFileNames: "[name].js",...
Still working on getting a single file
add this:
export default defineConfig({
...
build: {
rollupOptions: {
output: {
entryFileNames: `assets/[name].js`,
chunkFileNames: `assets/[name].js`,
assetFileNames: `assets/[name].[ext]`
}
}
}
})
Long time passed but for future viewers who visit this thread, try this package for single bundled .html file using ViteJS:
https://github.com/richardtallent/vite-plugin-singlefile
I have attached 2 screenshots, one of my vue.config.js and another of a section of the unminified output my build is producing.
Whats happening is this: I want to change the icon paths and the path to the manifest. For whatever reason the official way of changing this is not working. Right now they are blank spaces, however it was not working when it was anything else either ( just tried with 'foo/bar' as the path as I was typing this to triple check ).
I am confused because I seem to be doing everything exactly as I should according to the official docs. Is there anything another set of eyes can spot that I am missing?
Greetings Erik White
At some point I had the same difficulty and solved it as follows:
Copy the images into the "public" folder
example:
We add the folder "favicon" to "public", "favicon" contains 5 images
[project]/public/favicon/favicon-32x32.png
[project]/public/favicon/favicon-16x16.png
[project]/public/favicon/apple-touch-icon-152x152.png
[project]/public/favicon/safari-pinned-tab.svg
[project]/public/favicon/msapplication-icon-144x144.png
To add images in your html: modify the "vue.config.js" and add.
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
iconPaths: {
favicon32: 'favicon/favicon-32x32.png',
favicon16: 'favicon/favicon-16x16.png',
appleTouchIcon: 'favicon/apple-touch-icon-152x152.png',
maskIcon: 'favicon/safari-pinned-tab.svg',
msTileImage: 'favicon/msapplication-icon-144x144.png'
}
// ...
}
}
To change the path and name of "manifest.json" modify the "vue.config.js" and add:
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
manifestPath: 'my_new_manifest.json',
// ...
}
}
To change the properties of the "manifest.json", (name, images, color, etc) modify the "vue.config.js" and add:
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
manifestOptions: {
name: 'etc ..',
short_name: 'etc ..',
theme_color: '# f44647',
background_color: '# f44647',
start_url: 'index.html',
display: 'standalone',
orientation: 'portrait',
icons: [
{
src: './favicon/favicon-32x32.png',
sizes: '32x32',
type: 'image/png'
},
{
src: './favicon/favicon-16x16.png',
sizes: '16x16',
type: 'image/png'
},
{
src: './favicon/apple-touch-icon-152x152.png',
sizes: '152x152',
type: 'image/png'
},
{
src: './favicon/safari-pinned-tab.svg',
sizes: '942x942',
type: 'image/svg+xml'
},
{
src: './favicon/msapplication-icon-144x144.png',
sizes: '144x144',
type: 'image/png'
},
]
},
// ...
}
}
NOTE
chucks is not a supported parameter.
excludeChucks is not a supported parameter.
If you need to test a service worker locally, build the application and run a simple HTTP-server from your build directory. It's recommended to use a browser incognito window to avoid complications with your browser cache.
Remember to see the VUE documentation, it is very detailed, I leave you a link below #vue/cli-plugin-pwa
Nevermind, solved by updating my dependencies.
guessing this was fixed in a patch i didnt catch
I'm compiling my first angular library using rollupjs and I need your help :)
Currently I have a structure like this:
.src
--components
--component1
--component1.ts
--component1.scss
--component1.html
--common
--_variables.scss
And my component1.scss looks like this
#import "../../core/sass/variables";
:host {
.trigger {
&.clear_btn {
color: $color-grey;
}
}
}
My variables.sccs looks like:
$color-grey-light: #e3e3e3;
$color-grey: #bfbfbf;
and my rollup.config.js looks like:
export default {
input: 'build/index.js',
output: {
file: 'dist/common.js',
format: 'es',
},
plugins: [
angular({
preprocessors: {
template: template => minifyHtml(template, htmlminOpts),
style: scss => {
const css = sass.renderSync({data: scss}).css;
return cssmin.minify(css).styles;
},
}
})
],
external: [
'#angular/core',
'#angular/animations',
'#angular/router',
'#angular/platform-browser',
'#angular/forms'
]
};
but when I execute I get this error:
[!] (angular plugin) Error: File to import not found or unreadable: ../../core/sass/variables.
Parent style sheet: stdin
build/app/components/toggle/toggle.component.js
Error: File to import not found or unreadable: ../../core/sass/variables.
Parent style sheet: stdin...
I tried adding importer from node-sass but to be honest I have no idea how to use it to compile everything into css and then inject it to my js (I can actually inject the scss into my template by using rollup-plugin-angular but I don't know how to compile scss)
Any help, tips or suggestions will be really appreciated :)
I want to add the -p flag in order to generate documentation for private methods using grunt-jsdoc. How can I do that?
According to the documentation at grunt-jsdoc they state that we can use any of the options specified in the useJsDocCli, however do not know how they should be specified in the grunt task. Here is my current grunt task:
jsdoc : {
dist : {
src: ['app/scripts/directives/*.js','README.md'],
options: {
destination: 'doc'
}
}
}
How can I specify that I want the task to run with the -p flag (or any other flags)?
There's an example in the documentation under the template section https://github.com/krampstudio/grunt-jsdoc#templates
Just use the flag name without the dash, for example:
dist : {
src: ['app/scripts/directives/*.js','README.md'],
options: {
destination: 'doc',
private: true
}
}
}