What is the best method for integrating custom CSS into Extjs 6?

Transitioning from Extjs 4.2 to Extjs 6.2 has presented a challenge for me. In the past, I would include a custom css file in the head using a simple link placed after the Extjs inclusion.

<link rel="stylesheet" href="/custom.css" type="text/css" charset="utf-8" />

However, this method no longer works due to the way Extjs 6 loads its css files by injecting them at the end of the head.

My dilemma now is, how do I add a custom css file in ExtJs 6 to override the built-in rules?

Edit: While there are existing answers to this question,

  • pertains to ExtJs 4.1

  • provides some links, ultimately suggesting:

  • copy the file custom.css to 

    /packages/local/custom-theme/sass/etc

  • add the line @import 'custom.scss' to all.scss

While this seems like a good solution, I've encountered some obstacles:

  • As per the documentation, the sass/etc folder is loaded before all other styles
  • The content of my custom style sheet seems to not pass through the build machinery and fails to appear in my `build/production/[appname]/resources/[appname]-all.css
cssextjsextjs6

Answer №1

The app.json configuration file includes a section dedicated to external CSS files. If this section is not present, you have the flexibility to create it as needed. After performing a sencha build, the CSS file specified in this section will be loaded.

/**
 * List of CSS assets to be included in the correct order.
 *
 * Each item is an object with the following structure:
 *
 *      {
 *          // Path to the CSS file. If the file is local, specify a relative path from
 *          // the app.json file.
 *          //
 *          "path": "path/to/stylesheet.css",   // REQUIRED
 *
 *          // Set to true for remote files that should not be copied to the build folder.
 *          // Defaults to false for local files.
 *          //
 *          "remote": false,    // OPTIONAL
 *
 *          // Control how the file is updated:
 *          // "delta" for over-the-air delta updates
 *          // "full" for a full update on change
 *          //
 *          "update": ""      // OPTIONAL
 *      }
 */
"css": [
    {
        "path": "bootstrap.css",
        "bootstrap": true
    },
    {
        "path": "custom.css"
    }
],

"output": {
    "page": {
        "path": "index.html"
    },
    "manifest": {
        "embed": true
    }
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

3 Offset Columns in Bootstrap 1.5

I'm currently brainstorming a Bootstrap 3 grid design that features a top row with 4 columns and a bottom row with 3 columns centered against the first row like this... https://i.sstatic.net/e1V62.jpg Although I've considered using offsets, uti ...

htmlcsstwitter-bootstrap-3

Is it possible to achieve 100% screen height by combining a fixed height div with a stretchy height div?

I have a design concept that I'm trying to bring to life. I'm struggling with figuring out how to add another "stretchy div" to the layout. I want this second div to expand to fill all remaining vertical space on the screen without causing it to ...

htmlcss

What are the steps to incorporating ng2-dnd with a background-image?

I am currently utilizing the ng2-dnd module to enable sorting of a list. While the functionality for sorting and dragging is working smoothly, there's one issue - users can only drag by clicking on the text within my element. My goal is to allow user ...

htmlcssangular

the css stylesheet fails to load properly within the Django application

While using static files in my Django app, I encountered a peculiar issue: specifying body{ } in the CSS file can alter the body's attributes, but using the div's id or class name does not affect the div's attributes. Here's an example: ...

pythonhtmlcssdjango

Issue with background opacity not functioning properly in Internet Explorer 8

I am facing an issue with displaying 2 images in IE8 and IE9. Below is the code snippet causing the problem: .ui-widget-content { border: 0px solid #aaaaaa/*{borderColorContent}*/; background: rgba(0, 0, 0, 0.1) ; /*{bgColorContent}*/ url(images ...

javascriptjquerycssinternet-explorer-8

Is it possible to modify the global CSS in react-router according to the different routes?

I am attempting to customize a global CSS class (.ant-content) on a per-route basis. I have experimented with importing CSS files that override .ant-content for specific React components loaded in different routes. However, the issue is that these CSS fi ...

cssreactjsless

The div height adjustment peculiarities in IE7 and IE8 are causing quite a stir

I recently encountered a problem with my HTML/JS code that I thought was simple. The code is designed to expand the size of a div on mouseover and then collapse it back on mouseout. Here's how the code looks: CSS: .sign-in-up { position: absolut ...

javascripthtmlcssinternet-explorer-8internet-explorer-7

Enhance the appearance of your Vuejs application with conditional style formatting

I want to enhance a basic table by applying conditional CSS styles to the cells based on their values. For example: If area1 == 'one', then assign the td-one CSS style. <tr v-for="version in versions" :key="version.id"> < ...

javascripthtmlcssvue.jsvuejs2

Ways to conceal just a portion of the bootstrap sidebar?

I'm looking to create a sidebar using 'vue-bootstrap' that can be hidden when clicked, but I only want to hide 80% of the width of the sidebar. How can I achieve this effect of partially hiding the sidebar? <b-button v-b-toggle.sidebar-1 ...

javascripthtmlcssvue.jsbootstrap-4

How can I modify the text that appears when hovering over an element?

Can the displayed text be altered on mouse hover? For instance, can I change the text of a H1 tag when hovering over it using HTML, CSS, and JavaScript? ...

javascripthtmlcss

Dynamically load WordPress content using ajax and incorporate CSS3 animations for added visual appeal

It's time for a new challenge to push my learning curve. I've never ventured into the world of ajax before, but it seems like a skill I need to acquire. What better opportunity to learn than by implementing it on a fresh portfolio site. The main ...

jqueryajaxhtmlwordpresscss

Removing background color and opacity with JavaScript

Is there a way to eliminate the background-color and opacity attributes using JavaScript exclusively (without relying on jQuery)? I attempted the following: document.getElementById('darkOverlay').style.removeProperty("background-color"); docume ...

javascripthtmlcssbackgroundopacity

Can you show me the way to open a single card?

Can someone assist me in making it so only one card opens when clicked, rather than all of them opening at once? Additionally, if there is already an open card and I click on another one, the currently open card should close automatically. If you have any ...

javascripthtmljquerycsstoggle

Dynamic Dropdown Navigation with Bootstrap 4

I noticed that the default Bootstrap (4.0) dropdown animation is not present. How can I achieve a "slide" open effect similar to the collapsed navbar? It should be mentioned that the dropdown is located within the navbar. You can find the codeply example ...

jquerycssbootstrap-4navbardropdown

Firefox is not compatible with CSS animation

I am facing an issue with a select box in "multiple" mode that fetches its data asynchronously. While waiting for the data to load, I want to display a spinner inside the select box. Interestingly, the code works perfectly fine on Chrome, Chromium, and Edg ...

csscross-browsercss-animations

Loading hover images in css through jQuery preloading

Is there a reliable method for preloading CSS hover images using jQuery that anyone knows of? My ideal scenario would involve adding a class (for example, "pre-load-hover") to any element needing preloading, and then implementing JavaScript in $(document) ...

jqueryhtmlcss

Issues with undesirable spacing in CSS using the display property and table-cell display type

Having trouble grasping the concept of table and table-cell in css? See this example: http://jsfiddle.net/dd7h7/3/. HTML <div class="widget"> <div class="button"> <div class="content"> <div class="icon">A</div> ...

htmlcss

Angular's ngClass directive failed to be applied correctly

I am currently experimenting with the use of [ngClass] in Angular and it appears that it is not being applied as expected. Interestingly, [ngStyle] for similar CSS styles is working without any issues. What could I be doing wrong in this scenario? There ar ...

cssangularangular-ng-class

javascript the unseen element becomes visible upon page loading

my website has the following HTML snippet: function getURLParameters() { var parameters = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { parameters[key] = value; }); return param ...

javascripthtmlcss

Adding flair to a fresh element and then removing it upon its inception

I'm working with a JavaScript code that creates a new element when a button is clicked. I have a question about it. Here's the JavaScript code snippet: var comment = document.querySelector("#AddComment"); var req = new XMLHttpRequest(); if(comm ...

javascripthtmlcssajax