[Vuejs]-Webpack: Different behavior with 'vue init webpack' and 'vue init webpack-simple' project

by

0👍

I’m afraid both ways are not the best for importing bootstrap.
try npm install bootstrap@4.0.0-alpha.6

and follow the instructions in the site.

-1👍

I compared the webpack config and package.json of both and find the answer.

The key point was a plugin called style-loader, actually vue-style-loader in Vue.js

which can:

Adds CSS to the DOM by injecting a tag

Install it by npm install vue-style-loader --save-dev

and edit webpack config from:

  {
    test: /\.css$/,
    loader: 'css-loader'
  },

to:

  {
    test: /\.css$/,
    use: [
      {
        loader: 'vue-style-loader'
      },
      {
        loader: 'css-loader'
      }
    ]
  },

Now the css files loads automatically, no need for @import *.css in <style> tag anymore.
And other third-party packages began working properly as well.

Leave a comment