前言

在打包自己vue组建时，遇到一个问题，项目内的css文件无法单独打包出去。看到其他人的项目，都是install之后，可以引入一下js，引入一个css文件，就可以使用了。这块自己也研究了一下，如何vue组件项目中样式单独打包出一个css文件。

实现方式

主要是使用 extract-text-webpack-plugin 这个插件实现，但是如果你是webpack4以上版本，只能考虑使用 mini-css-extract-plugin 这个插件，具体使用方法类似。这里我的webpack是 3.6.0 版本，使用的是 extract-text-webpack-plugin3.0.2。

具体操作

插件安装

#  webpack 3使用安装命令 
npm install --save-dev extract-text-webpack-plugin
#  webpack 2 使用安装命令 
npm install --save-dev extract-text-webpack-plugin@2.1.2
#  webpack 1 使用安装命令 
npm install --save-dev extract-text-webpack-plugin@1.0.1

配置修改

修改webpack.config.js文件

• 引入插件

  const ExtractTextPlugin = require('extract-text-webpack-plugin')
  

• module.exports 下的plugins增加

  new ExtractTextPlugin('css/mapbox-map-tool.css')//括号内为打包成css文件的名字位置
  

• 增加转换规则。因为我项目内使用了less，需要把less和css的打包都配置上。在module.exports.module.rules中，修改或增加如下配置。

       //打包css
      {
          test: /\.css$/,
          use:  process.env.NODE_ENV=='development'? [
          'vue-style-loader',
          'css-loader'
        ]:ExtractTextPlugin.extract({
          fallback:'vue-style-loader',
          use:'css-loader'
        })
        },
        //打包.less文件
        {
          test: /\.less$/,
          use:  process.env.NODE_ENV=='development'?[
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]:ExtractTextPlugin.extract({
          fallback:'vue-style-loader',
          use:['css-loader',
            'less-loader']
        }),
        },
        //打包时，导出字体文件，注意和前面css文件的位置关系
        { test: /\.(woff|ttf|eot|svg)/, loader: 'file-loader?name=css/font/[name].[ext]' }
  

• 修改output下的publicPath为'process.env.NODE_ENV=='development'?'/dist/':'../''。如果不修改，打包出来的css文件可能无法正确的引入字体和图片文件
  

打包

最终打包出的结果目录结构如下图所示：

使用方式

以我自己打包的vue插件mapbox-map-tool为例，引入方式如下：

import {MapContainer} from "mapbox-map-tool";
import "mapbox-map-tool/dist/css/mapbox-map-tool.css"

注意

• 在dev时，不会生成单独css文件，只有在build时才会生成。
• 在webpack配置的入口index.js或main.js文件，一定要引入你编写的css或less文件，否则，是不会打包出来的。