build: extract css in production build

build/config.js

@@ -1,11 +1,12 @@
 const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 exports.alias = {
   'naive-ui/lib/icons': path.resolve(__dirname, '../src/_icons'),
   'src': path.resolve(__dirname, '../src')
 }
 
-exports.docLoaders = [
+exports.docLoaders = (env) => [
   {
     test: /index.entry$/,
     loader: ['vue-loader', path.resolve(__dirname, '../demo/loaders/NaiveUIDocEntryLoader.js')]
@@ -46,7 +47,7 @@ exports.docLoaders = [
   },
   {
     test: /\.(scss|css)$/,
-    use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
+    use: [...(env === 'production' ? [MiniCssExtractPlugin.loader] : []), ...(env === 'production' ? [] : ['style-loader']), 'css-loader', 'postcss-loader', 'sass-loader']
   },
   {
     test: /\.(svg|otf|ttf|woff2?|eot|gif|png|jpe?g)(\?\S*)?$/,

build/webpack.demo.js

@@ -35,7 +35,7 @@ const webpackConfig = {
     children: false
   },
   module: {
-    rules: config.docLoaders
+    rules: config.docLoaders('production')
   },
   plugins: [
     new HtmlWebpackPlugin({

build/webpack.dev.js

@@ -35,7 +35,7 @@ const webpackConfig = {
     children: false
   },
   module: {
-    rules: config.docLoaders
+    rules: config.docLoaders()
   },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),

build/webpack.doc.js

@@ -6,7 +6,7 @@ const webpack = require('webpack')
 const config = require('./config')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 const webpackConfig = {
   mode: 'production',
@@ -29,7 +29,7 @@ const webpackConfig = {
     children: false
   },
   module: {
-    rules: config.docLoaders
+    rules: config.docLoaders('production')
   },
   plugins: [
     new HtmlWebpackPlugin({
@@ -44,7 +44,11 @@ const webpackConfig = {
         }
       }
     }),
-    new ExtractTextPlugin('[name].[hash:7].css')
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+      ignoreOrder: false
+    })
   ]
 }
 

demo/documentation/theme/enUS/provideTheme.md

@@ -1,5 +1,5 @@
 # Provide Theme
-Use `n-config-providr` to set the theme of all its descedant components.
+Use `n-config-provider` to set the theme of all its descedant components.
 
 ```html
 <n-config-provider :theme="theme">

demo/documentation/theme/zhCN/provideTheme.md

@@ -1,5 +1,5 @@
 # 提供主题
-使用配置提供者 `n-config-provider` 来设定它全部的后代组件主题。
+使用 `n-config-provider` 来设定它全部的后代组件主题。
 
 ```html
 <n-config-provider :theme="theme">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.7.29",
+  "version": "1.0.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -85,6 +85,7 @@
     "loader-utils": "^1.2.3",
     "marked": "^0.7.0",
     "memory-fs": "^0.4.1",
+    "mini-css-extract-plugin": "^0.9.0",
     "mocha": "^6.2.2",
     "multer": "^1.4.2",
     "ncp": "^2.0.0",