What is the best way to integrate my company's global styles CDN for development purposes into a Vue cli project using Webpack?

After attempting to import through the entry file (main.js)...

import Vue from 'vue'
import App from '@/App'
import router from '@/router/router'
import store from '@/store/store'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { Popover } from 'bootstrap-vue/es/directives'
import 'https://mycompany/main.min.css'

Vue.use(BootstrapVue)
Vue.use(Popover)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})

I've explored options within webpack.base.config (externals or publicPath) by referring to various online resources, but none provided a satisfactory solution...

The CSS file obtained via CDN is dependent on and overrides Bootstrap classes, requiring that it be injected after Bootstrap. Can this be achieved with my existing setup in Vue/Webpack, or do I need a task runner like Gulp? Simply injecting the CDN after project build doesn't suffice as style changes should be visible during development work. Is there a simpler method than the aforementioned approaches? And just for clarification, making it an npm package is not an option due to privacy/security concerns.

csstwitter-bootstrapwebpackvue.jscdn

Answer №1

An effortless approach is to simply add it to your index.html file following all other styles. By the way, did you know that private repositories can be published on npm?

Answer №2

There is a method to handle the template directly used by HtmlWebpackPlugin.

To start, deactivate the inject in build/webpack.prod.conf:

//...
new HtmlWebpackPlugin({
  //...
  inject: false,
  //...
})
//...

In your index.html:

<!DOCTYPE html>
<html>

<head>
  <!-- ... -->
  <% if (process.env.NODE_ENV === 'production') { %>
    <% for (file of htmlWebpackPlugin.files.css) { %>
      <link rel="stylesheet" href="<%= file %>">
    <% } %>
    <link rel="stylesheet" href="https://mycompany/main.min.css">
  <% } %>
</head>

<body>
  <!-- ... -->
  <div id="app"></div>
  <% if (process.env.NODE_ENV !== 'production') { %>
     <link rel="stylesheet" href="https://mycompany/main.min.css">
  <% } else{ %>
    <% for (file of htmlWebpackPlugin.files.js) { %>
      <script src="<%= file %>" type="text/javascript"></script>
    <% } %>
  <% } %>
</body>

</html>

This approach allows manual insertion of static files, giving you control over the order during production. In development, stylesheets are placed in the body tag as it is less critical at that stage.

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

What is the best way to eliminate borders on a span element so they collapse seamlessly?

When using the tryit editor on this html and narrowing the result window (to around 200px), the border ends up inside the span as it spans across multiple lines. Is there a way to make the border "collapse" so that it forms a single irregular border around ...

css

Aligning navigation text in a grid layout

I am currently working on evenly distributing my 8 navigation links across the navigation bar. Below is the HTML code for my navigation: <nav> <ul class="nav"> <li><a href="index.html">Home</a></li> < ...

htmlcssnavcentering

Footer suffering from image invisibility syndrome

Having trouble displaying two social media images in my footer. Despite including them in my image map correctly, they just won't show up on the website. I've tried a lot of different things, but nothing seems to be working. Could it have somethi ...

htmlcss

What function does the sx prop serve in Material UI?

<Container style={{ margin: "10px" }}> <Article post={post} setCurrentId={setCurrentId} /> </Container> <Container sx={{ margin: "10px" }}> <Article post={post} setCurrentId={setCurrentId} /> </Cont ...

cssreactjsmaterial-ui

Capturing Axios request using universal JavaScript functions

My website is built using web components with a Vue app structure, where each component has its own API layer integrated through Axios. I am in need of implementing Auth middleware for all HTTP requests sent from either the main app or any individual com ...

vue.jsaxiosxmlhttprequest

Guide on organizing users into groups and filtering them using Firestore's reference field type

I currently manage a small group of employees with plans to expand in the future. To streamline operations, I am looking to implement a grouping feature that allows users to sort employees based on their assigned groups. Although I thought about using the ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Utilizing dynamic class and color binding features in VueJs?

I need help with implementing a Custom Sort method on my divs to arrange them in ascending or descending order. My query is how can I pre-set the icon color to grey by default, and only change it to black when clicked, while keeping the others greyed out a ...

javascriptvue.jsvuetify.js

Utilizing Vue.js components and properties to invoke a function

Trying to create a shopping cart button that keeps track of how many times it's clicked, but encountering an issue where the function called by the button doesn't receive the correct parameter. I attempted using {{id}} and :onClick="addThisToCar ...

javascripthtmlvue.js

Adjust the alignment of text within the <select> tag to the right in Safari browser

Is there a way to align text right in a select option tag? <select style="direction:rtl;text-align:right"> <option value="" selected="">همه</option> <option value="1">راهبر سيستم</option> <option v ...

htmlcsssafari

A step-by-step guide to creating adorable rounded corners in a DIV element

I'd like to create a stylish rounded corner div on the top-right and top-left edges. I attempted it with the following code: border-top-left-radius: 5em; border-top-right-radius: 5em; Desired look of the div: https://i.stack.imgur.com/EoSvSm.jpg A ...

javascripthtmlcss

Using javascript to quickly change the background to a transparent color

I am in the process of designing a header for my website and I would like to make the background transparent automatically when the page loads using JavaScript. So far, I have attempted several methods but none seem to be working as desired. The CSS styles ...

javascripthtmlcss

Encountering 404 errors in production when using vue-router with Node.js for URL paths

While trying to deploy a multipage vue3 frontend to an application, everything seems to work fine in development mode. However, when I switch to production and attempt to navigate to a specific URL through the search bar - like , I encounter a 404 error. ...

vue.jsvuejs3vue-router

The Bootstrap Tooltip seems to be glued in place

Utilizing jQuery, I am dynamically generating a div that includes add and close buttons. Bootstrap tooltips are applied to these buttons for additional functionality. However, a problem arises where the tooltip for the first add button remains visible even ...

javascriptjqueryhtmlcsstwitter-bootstrap

Errors arise in VUEJS when using forEach on arrays due to "this"

I can't seem to figure out why my code is no longer working, even though it was functioning perfectly fine before. Essentially, what I am trying to do here is fetch posts using axios from my database and then add those posts to an array. This is how I ...

vue.js

Activate the timepicker in Bootstrap when the user clicks on the input field

Struggling to implement a timepicker feature? Look no further than this resource. After adding the necessary js and css to your project, you may encounter issues with the popup not appearing when clicked. The code provided offers a TextBox control with s ...

javascriptjquerycsstwitter-bootstraptimepicker

Month and year selection feature in ExtJS 4 catalog

I recently came across an interesting Fiddle that featured a Month and Year picker for apps. After finding this Fiddle here, I noticed that it was built using Extjs 5.0, and it worked perfectly. However, when attempting to switch it to version 4.2.1, the l ...

javascriptcssextjsextjs4

Header 1 is not receiving any special styling, while Headers 2 through 6 are being styled accordingly

I am currently utilizing Skeleton V2.0.4 to design a landing page, but I seem to be having trouble with my styles not displaying correctly. Below are the specific lines of code related to it: /* Typography –––––––––––––– ...

htmlcsstags

Creating specific CSS classes for individual slides in a basic slider framework

So, I have a rather simple slider that is created using only CSS. Each slide has unique labels for navigation buttons. The main question here is: how can I dynamically add or remove classes to specific items on the slide only when that particular slide is ...

javascriptjqueryhtmlcss

Is it possible to retrieve any user data by id using Vue 3 Firebase Auth?

I'm a newcomer to vue/firebase and I've been able to easily access the "current user" data from authentication. However, I am struggling to write a JavaScript composable that can retrieve the user object or at least displayName when passing in an ...

javascriptfirebasevue.jsfirebase-authenticationvuejs3

Can someone guide me on how to create scrolling effects for my content? [html/css]

insert image description here Image dedicated to MrXQ I require assistance in verifying the accuracy of the following code - all content displayed below has been altered from the original for privacy concerns My objective is to have the headers scroll o ...

htmlcss