How do I include my company's global styles CDN (for dev use) using Webpack, within a Vue cli project?

user_7715842 0
Viewed 1517

I've tried importing via 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 tried to find a place within webpack.base.config (externals or publicPath) via numerous posts online - but none answered my question enough to make it work...

The css file delivered over the CDN essentially uses (and thus overwrites) Bootstrap classes, so it needs to be injected into the after Bootstrap - can I do this with my current setup? Vue/Webpack.. or do i need a task runner like Gulp? It's not enough to inject the cdn once we've built the project and have dist files.. we need to see the style changes whilst dev's work on the project. Is there an easier way than either of those 2 methods, and before anyone asks - no.. they won't make it an npm package due to privacy/security.

twitter-bootstrap vue.js webpack cdn css
2 Answers

The easy way would be to just include it in your index.html after all other Styles. Btw: you can publish private repos on npm.

user_46298080

One way to do it is directly handling the template used by HtmlWebpackPlugin.

First disable inject in build/webpack.prod.conf:

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

And 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') { %>
    <!-- During development there's less of a problem with putting stylesheets in the body -->
     <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>

What this does is inserting the static files manually, so you can choose the order, in production. During development, the link is written in the body tag, as then there isn't much of an issue with keeping standards.

user_45701880
Related