增加css文件打包配置

build/webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const {
   VueLoaderPlugin
 } = require('vue-loader')
@@ -34,11 +35,11 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader']
+        use: [MiniCssExtractPlugin.loader, 'css-loader'] // 替换style-loader
       },
       {
         test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader']
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
@@ -65,7 +66,10 @@ module.exports = {
     ]
   },
   plugins: [
-    new VueLoaderPlugin()
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].css' // 输出到dist/css/
+    })
   ],
   optimization: {
     splitChunks: {

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "zhicheng-components",
+  "name": "@zhicheng1012/zhicheng-components",
   "version": "1.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "zhicheng-components",
+      "name": "@zhicheng1012/zhicheng-components",
       "version": "1.0.1",
       "license": "MIT",
       "devDependencies": {
@@ -14,6 +14,7 @@
         "eslint": "~6.8.0",
         "eslint-plugin-vue": "~6.2.2",
         "file-loader": "^6.2.0",
+        "mini-css-extract-plugin": "^1.6.2",
         "sass": "^1.89.2",
         "sass-loader": "~10.2.0",
         "style-loader": "~2.0.0",
@@ -4881,6 +4882,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/mini-css-extract-plugin": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
+      "integrity": "sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0",
+        "webpack-sources": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.4.0 || ^5.0.0"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -12471,6 +12493,17 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
+    "mini-css-extract-plugin": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
+      "integrity": "sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0",
+        "webpack-sources": "^1.1.0"
+      }
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",

package.json

@@ -25,6 +25,7 @@
     "eslint": "~6.8.0",
     "eslint-plugin-vue": "~6.2.2",
     "file-loader": "^6.2.0",
+    "mini-css-extract-plugin": "^1.6.2",
     "sass": "^1.89.2",
     "sass-loader": "~10.2.0",
     "style-loader": "~2.0.0",

packages/index.js

@@ -5,8 +5,10 @@ import PromptText from './PromptText'
 import GuipTextarea from './GuipTextarea'
 import DevicePreview from './DevicePreview'
 import GuipRadio from './GuipRadio'
+import 'element-ui/lib/theme-chalk/index.css' // 如果依赖Element
 import './styles/index.css' // 全局引入
 import './styles/common.scss' // 全局引入
+
 const components = [
   GuipButton,
   GroupFormBtns,
@@ -19,6 +21,9 @@ const components = [
 
 const install = function (Vue) {
   components.forEach(component => {
+    if (!component.name) {
+      throw new Error(`Component name is required: ${component}`)
+    }
     Vue.component(component.name, component)
   })
 }