webpack项目在开发环境中使用静态css文件

在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法:

  1. 在js文件中import(假设已配好相关的loader)

    如在main.jsimport '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">

才疏学浅,学海无涯啊