webpack項目在開發環境中使用靜態css文件

webpack項目在開發環境中使用靜態css文件

在webpack項目（本人使用的 vue-cli-webpack ）中，須要引入 css 或 scss等樣式文件時，本人目前知道的，一般有如下幾種方法：

1. 在js文件中import（假設已配好相關的loader）
   如在main.js中import 'izitoast/dist/css/izitoast.min.css'
2. 在本身寫的 scss 等文件中 @import
   如@import '../../assets/scss/widgets.scss';（在src目錄下）
3. 在index.html文件中使用cdn：
   如 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

若是你不想使用使用上述方法，想要將 css 文件放置在 /static目錄下，像一般同樣經過link引入；或者使用上述方法有問題時：
如本人在使用 import方法在main.js中引入font-awesome.min.css時，總是出問題：

warning  in [workspace]/~/.3.0.1@vue-style-loader/lib/listToStyles.js

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other
case-semantic.
...

又不想在開發環境中一直使用CDN，那麼怎麼辦呢？

若是直接在index.html中使用<link rel="stylesheet" href="./static/css/font-awesome.min.css">，npm run dev時webpack是沒法幫你從目標目錄中加載css文件的，
由於 dev-server 中沒有 此對應目錄！
由於你的css文件沒有通過webpack處理（應該是這樣吧？）
那麼，只好...
stackoverflow！

http://stackoverflow.com/questions/27639005/how-to-copy-static-files-to-build-directory-with-webpack

此問題下的回答主要提供了兩種方法（原理上是一種，都是用 file-loader 來處理 靜態的css文件）：

• 使用插件：copy-webpack-plugin
• 直接使用 file-loader

---

下面開始使用copy-webpack-plugin的案例。
本人的環境爲 vue-cli-webpack 項目， 項目的webpack.prod.conf.js中已經配置了此插件。
---
由於此處是在開發環境中使用 static 下的 css，所以，第一步是在 webpack.dev.conf.js配置文件中，配置CopyWebpackPlugin

var path = require('path')
var CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = merge(baseWebpackConfig, {
    context: path.resolve('./'), // 項目根目錄、這樣配置context就不須要修改 entry 中的app地址了
    // ... 其餘配置
    plugins: [
       // ... 其餘插件
        new CopyWebpackPlugin([{
          from: path.resolve('./static'),
          ignore: ['.*']
        }])
    ]
})

而後在index.html文件中的head部分

<link rel="stylesheet" href="./static/css/font-awesome.min.css">
<link rel="stylesheet" href="./static/css/iview.css">
<link rel="stylesheet" href="./static/css/ol.css">

---

才疏學淺，學海無涯啊