I'm trying to override the file:
web/bundles/syliusweb/css/backend.css
Every tutorial I see on theming or overriding shows how to do this for src bundles, for example located in: src/bundles/bundleHere/css/fileHere.css
So far, I've got a theme folder for my theme within app/themes. I've imported a new yml config file for my theme, which reads:
sylius_theme:
sources:
filesystem: ~
I have a composer.json within my theme, which reads:
{
"name": "vendor/my-theme",
"type": "sylius-theme",
"description": "My custom theme.",
"extra": {
"my-theme": {
"description": "My custom theme."
}
}
}
This was enough to get the theme to show up on the 'theme' dropdown in the 'channels' section of the admin panel. I selected my theme, so I assume it's being used.
I've tried overriding web/bundles/syliusweb/css/backend.css, but am having trouble doing it. My changes simply aren't showing, even after dumping assetic. I've also tried clearing the server-side cache. Here are the two locations I've tried for my override:
.
└── MyTheme
├── composer.json
└── public
└── css
└── backend.css
.
└── MyTheme
├── composer.json
└── public
└── SyliusWeb
└── css
└── backend.css
I'm not sure how to reference the web bundles, or if there's another step that I'm missing even though I saw and activated my theme. I tried to follow the documentation on theming, but only src bundles were referenced, and some of the instructions didn't have enough information to verify I'd followed them correctly.
UPDATE
I've realized that the same css file also exists where I normally find (and have been able to override) bundle files: src/Sylius/Bundle/WebBundle/Resources/public/css/backend.css
I've tried overriding this the same way I normally would:
.
└── MyTheme
└── SyliusWebBundle
└── public
└── css
└── backend.css
I've cleared the cache and dumped Assetic after this, but it also hasn't worked, and I don't see my changes being applied.
php bin/console sylius:theme:assets:install
Related
I am building an static markdown blog website using Vue3,and I am using require.context() to load markdown files.
This is the project structure,and I load files from static/posts.
├── dist
│ ├── assets
│ │ └── static
│ │ └── posts
│ │ ├── dev-first-vue3-todolist.md
│ │ ├── dev-fix-missing-xcrun.md
├── package.json
├── src
│ ├── App.vue
│ ├── main.js
├── static
│ └── posts
│ ├── dev-first-vue3-todolist.md
│ ├── dev-fix-missing-xcrun.md
└── vue.config.js
Here's how I load these markdown files.
let context = require.context("../static/posts", true, /\.md$/, "sync");
let keys = context.keys();
// the markdown file list
const postRawList = [];
keys.forEach((key) => {
const raw = context(key).default;
postRawList.push(raw);
});
It worked well. I can read postRawList from static/posts and render them by markdown parser.
The point is, I want my blog website static, so when I build this Vue app I use copy-webpack-plugin to copy these markdown files from static/posts to dist/assets/static/posts and it worked well.
config.plugins.push(
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, "static/posts"),
to: path.resolve(__dirname, "dist/assets/static/posts"),
},
],
})
);
I want to manage my markdown posts only by adding or deleting markdown files in dist/assets/static/posts.
But after I changing the markdown files in dist/assets/static/posts(like delete dev-first-vue3-todolist.md) ,the markdown object list(postRawList) doesn't be updated.
The markdown list is the same as the markdown list in static/posts , and no matter how I change files in this 2 posts folder,it does't be updated.
I guess it is caused by "require cache", and I had tried to delete cache after changing the files, but it did't work.
delete require.cache[context.id];
So I want to know why the file objects not be updated after I built the app and change the files in markdown directory(loaded by require.context()).
This is my first time asking questions on stackoverflow,and I feel sorry if I didn't make it clear.
Is there a way to stop getting error from ESLint for single word view name in Vue3?
Every time I run ESLint, I get following message:
1:1 error Component name "About" should always be multi-word vue/multi-word-component-names
I currently have this setup:
file structure:
├── index.html
├── node_modules
├── npm
├── package.json
├── package-lock.json
├── public
│ └── favicon.ico
├── README.md
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.svg
│ ├── components
│ │ └── Menu.vue
│ ├── env.d.ts
│ ├── main.ts
│ ├── router
│ │ └── index.ts
│ └── views
│ ├── About.vue
│ └── Home.vue
├── tsconfig.json
└── vite.config.ts
.eslintrc:
{
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/typescript/recommended"
],
"parserOptions": {
"ecmaVersion": 2021
},
"rules": {}
}
package.json
{
...
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"lint": "eslint --ext .ts,vue --ignore-path .gitignore ."
},
...
}
Option 1: Disable globally
To disable the rule in all files (even those in src/components):
// <projectRoot>/.eslintrc.js
module.exports = {
⋮
rules: {
'vue/multi-word-component-names': 0,
},
}
Option 2: overrides in ESLint config for src/views/
To disable the rule only for src/views/**/*.vue, specify an overrides config:
// <projectRoot>/.eslintrc.js
module.exports = {
⋮
overrides: [
{
files: ['src/views/**/*.vue'],
rules: {
'vue/multi-word-component-names': 0,
},
},
],
}
Note: If using VS Code with the ESLint Extension, restarting the ESLint Server (through Command Palette's >ESLint: Restart ESLint Server command) or restarting the IDE might be needed to reload the configuration.
Option 3: Directory-level config for src/views/
It's also possible to disable the rule for src/views/**/*.vue with an .eslintrc.js file in that directory:
// <projectRoot>/src/views/.eslintrc.js
module.exports = {
rules: {
'vue/multi-word-component-names': 0,
},
}
For those still having this issue, add the following under rules in the .eslintrc.js file
rules: {
...
'vue/multi-word-component-names': 0,
}
There's a simple solution. You need define your component name with more than one word as it states. Should be PascalCase as below;
eg: AboutPage.vue
Find a vue.config.js file in the project root directory, create one in the root directory if you don’t have one, write the code marked below, save it, and recompile it. The project will run normally
Change your component name from About to AboutView
This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.
Bad
<!-- in pre-compiled templates -->
<Item />
<!-- in in-DOM templates -->
<item></item>
Good
<!-- in pre-compiled templates -->
<TodoItem />
<!-- in in-DOM templates -->
<todo-item></todo-item>
Is it possible to show different sidebars depending on what section of the site you're in? So if I had two sections (Books and Countries) then I could show the corresponding sidebar menu object:
module.exports = {
books: {
"Children's Book": [
"books/childrens-books/winnie-the-pooh",
"books/childrens-books/harry-potter",
],
"Non-Fiction": [
"books/non-fiction/hitchikers-guide",
"books/non-fiction/a-history-of-england",
]
},
countries: {
"Europe": [
"countries/europe/england",
"countries/europe/france",
"countries/europe/spain",
],
"Asia": [
"countries/asia/china",
"countries/asia/india",
"countries/asia/laos",
],
},
}
The docs do reference that something like this could be done, but there aren't any examples to go along with it:
You can have multiple sidebars for different Markdown files by adding more top-level keys to the exported object.
The only other place I can find sidebars referenced is in docusaurus.config.js, but I'm not sure what this section is for:
presets: [
[
'#docusaurus/preset-classic',
{
docs: {
sidebarPath: require.resolve('./sidebars.js'),
},
...
Any pointers appreciated!
So the issue was that my content structure didn't match what I had in sidebar.js. This is my content structure now:
docs
├── README.md
├── books
│ ├── childrens-books
│ │ ├── harry-potter.md
│ │ └── winnie-the-pooh.md
│ └── non-fiction
│ ├── a-history-of-england.md
│ └── hitchikers-guide.md
└── countries
├── asia
│ ├── china.md
│ ├── india.md
│ └── laos.md
└── europe
├── england.md
├── france.md
└── spain.md
├── docs
├── docusaurus.config.js
├── sidebars.js
└── src
I think the issue lay in the fact that Docusaurus couldn't find the articles I was referencing, so it just didn't parse.
With this set up URLs like localhost:3000/docs/books/childrens-books/harry-potter will work fine, but localhost:3000/docs/books/childrens-books/ will return a blank page since there's no corresponding article for that URL.
I am creating documentation for a W3C web components library (Vanilla JavaScript) using VuePress. However, my "custom" web components are generating an error due to VuePress trying to "recognize" them as Vue components the very first time the page loads.
Once the page is loaded my web components work as expected, but the error is there anyway.
This is the error I am getting:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <nova-timeline> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <TimeLineWrapper> at docs/.vuepress/components/TimeLineWrapper.vue
I have created the following structure related to Vuepress
.
├── docs
│ ├── .vuepress
│ │ ├── components
│ │ │ ├── TimeLineWrapper.vue
│ │ ├── config.js
│ │ └── theme
│ ├── README.md
│ ├── components
│ │ ├── README.md
│ │ └── Timeline.md
And this is part of my code:
// docs/.vuepress/components/TimeLineWrapper.vue
<template>
<nova-timeline ref="timeline"></nova-timeline>
</template>
<script>
import timeLineJson from "./data/TimeLineData";
export default {
data() {
return {
timeLineJson: timeLineJson
};
},
mounted() {
this.$refs.timeline.data = this.timeLineJson.data;
this.$refs.timeline.configuration = this.timeLineJson.configuration;
}
};
</script>
// This is my W3C web component:
<nova-timeline ref="timeline"></nova-timeline>
What I like to know is how to "ignore custom components", I mean where or how to do this kind of configuration using the VuePress way.
Vue.config.ignoredElements = [
// Use a `RegExp` to ignore all elements that start with "nova-"
// 2.5+ only
/^nova-/
]
https://v2.vuejs.org/v2/api/#ignoredElements
Thanks in advance.
I finally manage to find how to add my ignored elements,
1) Create a file named enhanceApp.js in docs/.vuepress/theme
2) Place this content inside of it:
// https://vuepress.vuejs.org/guide/custom-themes.html#app-level-enhancements
export default ({ Vue, options, router, siteData }) => {
Vue.config.ignoredElements = [
// Use a `RegExp` to ignore all elements that start with "nova-"
// 2.5+ only
/^nova-/
];
}
Now, the error will disappear since Vue will ignore our custom web components.
I would like to define environment-specific properties in a .yml/.yaml file. Therefore I created the following test.yaml:
baseUrl: 'http://localhost:1234'
Next, I wrote this karate-config.js:
function() {
var env = karate.env;
if (!env) {
env = 'test'; // default is test
}
// config = read(env + '.yaml')
var config = read('/home/user/git/karate-poc/src/test/java/test.yaml');
// var config = read('test.yaml');
// var config = read('classpath:test.yaml');
return config;
}
As seen here https://github.com/intuit/karate#reading-files the read() function should be known by Karate, however I'm not sure if this only applies to .feature files or the karate-config.js too.
Unfortunately, none of the above read()s work, as I'm getting this error:
Caused by: com.intuit.karate.exception.KarateException: javascript function call failed: could not find or read file: /home/user/git/karate-poc/src/test/java/test.yaml, prefix: NONE
at com.intuit.karate.Script.evalFunctionCall(Script.java:1602)
I'm sure that the file exists and is readable.
Am I doing something wrong or is my approach not supported? If it's not supported, what would be the recommended way to read the configuration based on the environment from a YAML file (once) in order to use it in (multiple) .feature files?
Thank you very much
Edit: Tree structure of the project:
.
├── build.gradle
├── gradle
│ └── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── gradle.properties
├── gradlew
├── gradlew.bat
└── src
└── test
└── java
├── karate
│ └── rest
│ ├── rest.feature
│ └── RestRunner.java
├── karate-config.js
└── test.yaml
Run with ./gradlew test
In JS, use the karate object, which is explained here: https://github.com/intuit/karate#the-karate-object
So this should work:
var config = karate.read('classpath:test.yaml');