Is it necessary to include CDN @imports when optimizing CSS files in a Require.js/Backbone app using r.js?

In my CSS file, I've included an external font from Google Font using the @import rule.

styles.css

/* You can use @import. r.js will handle merging them during the build process */
@import "../vendor/bootstrap/css/bootstrap.css"; //this has been included
@import url(http://fonts.googleapis.com/css?family=Chewy); //will this be included as well?
...

Will r.js include and optimize the remote font file? The documentation for r.js is not very detailed in terms of its features and settings, or am I overlooking something? Should I adjust my build configuration to include the remote/cdn file?

cssoptimizationbackbone.jsrequirejsr.js

Answer №1

Unfortunately, starting from version 2.1.5, the output I am receiving is as follows:

Optimizing (standard.keepLines) CSS file: /.../style/style-all.css
/.../style/style-all.css
Cannot inline css import, skipping: https://fonts.googleapis.com/css?family=Chewy

Upon analyzing the source code on github, it appears that only relative paths are supported.

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

The CSS pseudo-element ::before is neutralizing the effect of ::

Here's an HTML code snippet: <h1>Example title</h1> This is the corresponding CSS code: h1::first-letter{ display:none; } h1::before{ content: url(http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-E-icon.png); } I&apo ...

htmlcss

phpHTML: Form to update password with verification of current password

How can I implement a function in my form to ask for the current password before allowing users to change their password in the database? Code snippet to update the database: $result = mysqli_query($con,"SELECT * FROM admin"); if ($row = mysqli_fetch ...

javascriptphpjquerymysqlcss

What is the best way to allow a number to be editable when clicked on in a React application

Currently, I am trying to find a solution for making a number editable when clicked without having to use form inputs or other React libraries that don't fit my requirements. The provided screenshots showcase the desired interface. https://i.stack.im ...

javascriptcssreactjs

What technologies are utilized to create this price chart in the JavaScript visualization?

Does anyone know how this historical data price graph is created? I've heard of JS libraries like that can generate visualizations, but I'm not very familiar with JS. Any tips on how to create a similar visualization would be greatly appreciate ...

javascriptcss

What can be done to prevent the aspect ratio from being altered?

I am working on creating a parallax effect using a background image that is set to a width of 100% and a height of 700px. I have set the image to have a fixed attachment, but the problem arises when I change the size of the browser window - the picture los ...

htmlcssaspect-ratio

Can you explain the significance of xs, md, and lg within the CSS Flexbox framework?

Currently in the process of developing an application using React and looking to apply some styles to my components. I stumbled upon which delves into a fluid grid system. A snippet from the example is shown below: <Row> <Col xs={12} sm={3} m ...

cssreactjsflexboxreact-flexbox-grid

The background suddenly vanishes once the background-image property is set to no-repeat

I'm currently attempting to add a background image to my WordPress website. .content:before { content: ""; background-image: url("gfx/SevenWonders.jpg"); /*background: #fff;*/ background-size:600px 700px; background-repeat: no-repeat; position: absol ...

csswordpressbackground-repeat

Creating dynamic CSS classes with SCSS/SASS

Recently, I encountered a scenario where I needed to automate the creation of a series of CSS classes by utilizing a mixin. This led me to ponder if there is a dynamic approach to achieve this. Essentially, the classes I have are structured as follows: . ...

csssass

Animating the maximum height causes a delay in the performance of other elements

Attempting to adjust the maximum height of a ul. When the max-height property changes (via toggling a class), the height shifts immediately, while the items below the ul maintain the animated height as expected. var expander = $('.skill-expand&apos ...

jquerycssanimationcss-transitions

Ways to disable mousewheel function in jQuery

I am trying to deactivate the mouse scroll in jQuery and successfully did so, however, I encountered this error message jquery.min.js:2 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See Thi ...

javascripthtmljquerycssmousewheel

How can we make the border-bottom for all list items (connection) function effectively?

After creating an unsorted list with list items, here is how it appears: <ul id="mylist"> <li> <input type="checkbox" id="[[Array]]" /> <label for="[[Array]]"><img src="images/[[ArrayImage]]"/></label> <div cl ...

htmlcss

Need to know how to retrieve the li element in a ul that does not have an index of 2? I am aware of how to obtain the index greater than or less

I'm looking to hide all the li elements except for the one with a specific index. I've written some code to achieve this, but I'm wondering if there's a simpler way using jQuery. While jQuery provides methods like eq, gt, and lt, there ...

javascriptjquerycss

Is there a way to modify the color of multiple disabled select fields in Internet Explorer?

After experimenting with various methods to change the color of disabled select items, I found success in Chrome but hit a roadblock in IE. Despite trying ::ms-value, the red color was applied to all disabled select fields, which was not the desired outcom ...

htmljquerycss

Generating numerous div elements with jQuery's zIndex property

While attempting to create a function that runs on the $(document).ready() event and is supposed to generate a new div, I encountered an issue. Whenever I try to create another div with the same DOM and Class attributes but in a different position, a probl ...

javascriptjqueryhtmlcss

adjust and align the input controls

Can you provide suggestions on how to align the 4 buttons vertically and resize them to be 50% in width and 20% in height relative to the browser's dimensions, while ensuring that the remaining 20% of height is evenly distributed between the buttons? ...

htmlcss

validating forms with an abundance of checkboxes

Currently, I am in the process of creating a checkbox form that consists of more than 200 questions (yes, I know, quite ambitious!). My main requirement is to prevent the user from advancing to the results page unless they have checked at least one checkbo ...

javascriptphphtmlcss

Is there a way to determine if a div is positioned 100px from the bottom edge?

When using the sticky class to stick a div, I encountered an issue where it sticks correctly from the top but overlaps the footer at the bottom. https://i.sstatic.net/28A3A.jpg Here is the HTML code: <div class="tab-content"> <div role="tab ...

javascriptjquerycss

Challenge with CSS3 designstyling

After creating a tag, I noticed that there is a white background after the arrow on the right side. .tags { list-style: none; margin: 0; overflow: hidden; padding: 0; } http://jsfiddle.net/eR8Ye/5/ Is there a way to eliminate the white backgro ...

htmlcss

Creating various iterations of a single CSS animation

Attempting to animate multiple instances of a cross mark animation can be tricky. The animation works well with one instance, but struggles when trying to create more than one. The challenge lies in controlling the size and position of each cross animation ...

javascripthtmlcss

For my Bootstrap website, it's a constant struggle to balance between having a responsive menu item and ensuring its correct visual appearance

I need help with creating a unique menu design for my website. On the desktop site, I want to display "username/password/sign in" buttons, while on the mobile responsive version I only want to show a single "sign in" option that redirects users to the sign ...

htmlcsstwitter-bootstrap