使用webpack導入css庫

Question

我正在用Vue.js構建一個項目，我正在使用webpack模板啓動。 在文檔[http://vuejs-templates.github.io/webpack/pre-processors.html]我可以這樣說的：

獨立的CSS文件

爲確保一致的提取和處理，建議 進口全球性的，獨立的樣式文件從根App.vue 組件，例如：

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

注意：你可能只能通過 自己爲你的應用程序寫入的樣式做到這一點。對於現有的庫例如Bootstrap 或Semantic UI，您可以將它們放在/ static中，並直接在index.html中引用它們 。這樣可以避免額外的構建時間，並且對於瀏覽器緩存也更好一些。

因此，包含一個css庫（如Normalize或Bootstrap）的工作流程是通過npm/yarn安裝它，將它複製到/ static然後在index.html文件中引用它？ 因爲我發現這種方法非常乏味和脆弱，如果我想升級包，該怎麼辦？我需要將它們再次複製到/ static文件夾中...

沒有其他方式可以通過包管理器與webpack安裝css庫嗎？

Answer 1

基本上，你可以使用css-loader插件的Webpack。只需編輯你的webpack.config.js並通過這樣做導入css：

從'file.css'導入css;