前言
在打包自己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文件,否则,是不会打包出来的。