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

---

才疏学浅，学海无涯啊