Questions about admin css and js

Questions
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