diff --git a/build/webpack.config.js b/build/webpack.config.js index bbb5f7d..572b1a1 100644 --- a/build/webpack.config.js +++ b/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: { diff --git a/package-lock.json b/package-lock.json index 7d0f811..57e24e6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e06ee33..a754390 100644 --- a/package.json +++ b/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", diff --git a/packages/index.js b/packages/index.js index 33fe541..b8bf423 100644 --- a/packages/index.js +++ b/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) }) }