All geek questions in one place

How to enable global CDN styles (to use dev) in my company using Webpack as part of the Vue cli project?

I tried to import through a recording 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 tried to find a place in webpack.base.config (externals or publicPath) through numerous posts on the Internet, but no one answered my question to make it work ...

css, CDN, (, , ) Bootstrap, Bootstrap - ? Vue/Webpack.. , Gulp? , cdn , dist. , . , , , - - .. npm - /.

+4
2

index.html . Btw: npm.

+1

- , HtmlWebpackPlugin.

inject build/webpack.prod.conf:

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

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 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>

, , . body, .

0

Source: https://habr.com/ru/post/1689458/

More articles:


All Articles