I have a polymer 3 app created with polymer init
There I have some custum elements. In my my-app.js I importet the custom element js and used the element there.
Everything works but if I build the app with polymer build the custom element js file was not generated in the build/es5-bundled/src folder
What am I doing wrong?
You have preset set to es5-bundled - a bundled build -> the custom element is generated and written to index.html.
You'll find in index.html something like <script crossorigin="">define(['/src/my-app/my-app.js']);</script>
Related
I have a blazor webassembly app. When I create a *.razor.css file for the component in one of the two default folders (Pages, Shared) everything works just fine. But I want to organize my code into subfolders like Pages/Components. I have created a new folder and test component in it Pages/Components/Test.razor. I have also added #using Project.Pages.Components to _Imports.razor. When I use the test component in my app it loads correctly. But I have an issue with CSS. I have created the CSS file Pages/Components/Test.razor.css. It looks like this file is ignored. When I look into Project.styles.css file which contains processed CSS of components from those two default folders it does not contains any CSS rules from the test file.
Is it possible to somehow configure blazor to include CSS from subfolders?
I am learning web development and I am trying to use the COREui 4.0.1 Bootstrap admin template in an existing Symfony 5.3 project instead of standard Bootstrap 5 components and utilities. I am trying to get the page to look like https://coreui.io/demo/free/3.4.0/.
The project was created using symfony new my_project_name --full. I added Bootstrap CSS with https://getbootstrap.com/docs/5.0/getting-started/introduction/#css and JS with https://getbootstrap.com/docs/5.0/getting-started/introduction/#bundle to my base.html.twig.
Steps that I took:
Create a new controller
Create an associated view using a twig template
Replaced the Bootstrap JS with https://coreui.io/docs/4.0/getting-started/introduction/#bundle and CSS with https://coreui.io/docs/4.0/getting-started/introduction/#css in my base.html.twig
What I was expecting:
When accessing the controller/view I would see https://coreui.io/demo/free/3.4.0/
The actual result:
Minor styling changes (from COREui rather than original Bootstrap) but no layout changes
The CoreUI CSS and JS that you have added to your project is to be used in the same way that you would use Bootstrap components and utilities i.e. adding to existing HTML elements.
Viewing the page source at the demo you provided at https://coreui.io/demo/free/3.4.0/ shows the HTML elements that you would need to have in your own project, that would then have CoreUI (in this case) CSS and JS components applied to them.
Using that demo https://coreui.io/demo/free/3.4.0/, if you wanted a side navigation bar you would need to have a HTML element like:
<div class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-lg-show" id="sidebar">
<div class="c-sidebar-brand d-lg-down-none">
...
I use nativescript with VueJs
My problem is that my page specified CSS files aren't used.
My start page is start.js and in the same folder I have a start.css
but the styles aren't applied.
Do I need to something else, or configure?
Because at the docs I said that it normally should work like this.
Always refer the appropriate docs for the flavour, since you are using Vue you must follow the docs here. What you were referring to was for core js one.
With NativeScript Vue you have to write scoped styles within your component, just the same way how you would do it for a Vue based web app.
An external file can be used as Page-Specific CSS as follows in NativeScript-Vue:
<style scoped src="./Home.css"></style>
Where, Home.css is located in your components folder.
Similarly, for SCSS:
<style lang="scss" scoped src="./Home.scss"></style>
Note: You'll need to rebuild your app by if its running on an emulator/device when you make this addition to your .Vue file.
I am building my application using aspnetcore-spa react-redux boilerplate (can be seen on http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/ )
However the server side rendering takes a lot of time (~30 sec) and I would like to disable it. Can you please tell me how to disable server side rendering without breaking the code?
That template adds the asp-prerender-module tag helper to the <div id="react-app"...> tag in Home\Index.cshtml. If you remove that tag helper you will disable server side rendering.
The tag helper is imported in /Views/_ViewImports.cshtml:
#addTagHelper "*, Microsoft.AspNetCore.SpaServices"
You can do the bundling from the command line before you run the application with...
> webpack --config webpack.config.vendor.js
> webpack
Steve Sanderson gave a presentation on this at NDC Sydney.
The aspnet-prerender-module tag helper is part of SpaServices, which is the basis for all the projects generated by the Yeoman aspnetcore-spa templates. Therefore, this is how you would enable/disable pre-rendering in any of those templates, including Angular 2, Aurelia, Knockout, and React (with Redux). The same would apply to any custom project or template that you create using Node package aspnet-prerendering and the aforementioned tag helper.
For Angular 2 project I've solved this by removing asp-prerender-module attribute from <app> tag in Index.schtml.
I am building a test app to learn how to organize multiple files with METEOR.
I have a head.html and inside I have the following link to my custom CSS:
<!-- Custom CSS -->
<link type="text/css" rel="stylesheet" href="/stylesheets/globals/style.css"/>
Very normal, Yet I have trouble to make that working.
Here is my app directory:
-app folder
---client
-----head.html
-----index.html
-----stylesheets
-------globals
---------style.css
I know it seems to be a very basic question but I can not figure it out.
Basically you have 2 ways of inserting CSS in a Meteor project :
Using the Meteor build tool to automatically concatenate and minify all your CSS files living in the client/ directory : in this case you don't need to import your stylesheets using a link tag in the head. This is perfect for vital CSS files that your app should load when started.
Example : put your CSS file under client/stylesheets/globals/style.css and that's it, no need to import it, it's automatically injected in your project by Meteor.
Using the classic way of importing stylesheets in a web application : you can put your CSS files inside the public/ directory and they will be served by your app server. In this case the Meteor build process will be skipped so files won't be concatenated together nor minified. Use this method when you want to lazy load big CSS files only needed in a subpart of your app (for example admin section styling).
Example : put your minified CSS file under public/stylesheets/admin/style.css, and use something like iron:router to load the CSS file when hitting the admin route.
Router.route("/admin", {
// onRun hooks executed only once
onRun: function(){
// create a link taf holding a reference to our publicly served CSS file
var link=$("<link>",{
rel: "stylesheet",
href: "/stylesheets/admin/style.css"
});
// append to the head tag
$("head").append(link);
}
});