使用Webpack导入CSS库

Question

I'm building a project with Vue.js and I'm using the webpack template to start. In the documentation [ http://vuejs-templates.github.io/webpack/pre-processors.html] I can read this:

Standalone CSS Files

To ensure consistent extraction and processing, it is recommended to import global, standalone style files from your root App.vue component, for example:

 <!-- App.vue --> <style src="./styles/global.less" lang="less"></style> 

Note you should probably only do this for the styles written by yourself for your application. For existing libraries eg Bootstrap or Semantic UI, you can place them inside /static and reference them directly in index.html. This avoids extra build time and also is better for browser caching.

So the workflow to include a css library (like Normalize or Bootstrap) is to install it through npm/yarn, copy it to /static and then refer to it in the index.html file? Because I find this method very tedious and fragile, what if I want to upgrade the package? I will need to copy them again in the /static folder...

There is no other way to include css library installed through package manager with webpack?

Answer 1

Basically, you can use css-loader plugin for Webpack. Simply edit your webpack.config.js and import css by doing this:

import css from 'file.css';