Questions about admin css and js

Questions
1

Hi, am trying to get my head around how the custom admin js and CSS work and have a couple of questions.

On some admin modules, like Dashboard and products, we can include js and CSS using the IAppExtension interface, but these files will not be included in products or settings or any newer part of the application?

Are there other hooks I can use to include uncompiled, js or CSS files in the header in the rest of the admin application as well?

When I build the js in the field-type project it creates/dist/vendor.js and the file can be accessed using where /Litium/Client/Scripts/dist/vendor.js but if I remove or change this file manually, it doses not seem to affect the file in the browser, removiing that file will not cause an error, why? Is this not the same file? Cached?

Am guessing that /vendor.js are supposed to be used for the newer part of the admin? But how do I include custom CSS?

Any information here would be helpful

Litium version: 7.2

2

If you want to apply styles for your custom field type, I would suggest you to use Component Styles instead, so you don’t need to include the CSS file. Using Component Styles enables a more modular component design, avoid style conflict by using scoped style. Read more about how to use and why we should use it here: https://angular.io/guide/component-styles

You have two options, one is using inline CSS, the other one is having a CSS file then import it in the component file. I will take the Litium.Accelerator.FieldTypes project as an example, I will make the preview text of the field bold:

Edit field-editor-filter-fields.component.html template to add preview class for the DIV tag:
<div class="preview" preview>

Then in the .ts file, modify @Component decorator to add style:

    styles: [`.preview { 
        font-weight: bold; 
    }`],

Then build the project.

If you prefer having .css file instead, here is how:
Change the @Component decorator to link to the css file instead:
styleUrls: ['./style.css'],

Create a file named style.css in the same folder:

.preview {
    font-weight: bold;
}

Last but not least, update config\webpack\webpack.js file to include the css-loader in the bundle Accelerator.js. This is required since we need it to be able to load the .css file:

Find this one:

                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "all"
                },

Change it to:

                commons: {
                    test: /[\\/]node_modules[\\/](?!(css-loader)).*[\\/]/,
                    name: "vendor",
                    chunks: "all"
                },

Then css-loader library will be included in the bundle file Accelerator.js

Note that vendor.js file is not used, you can remove it. You can see in the webpack.js file, we put all external libs into this vendor.js file, to keep the Accelerator.js file to have only the code of the project, not any lib. In case you want to install and use packages that the backoffice does not have, you need to exclude it from vendor.js, like we just did with css-loader.

1 Like