feat: 增加 css 样式产物 & 新增 @nutui/auto-import-resolver (#2602)

packages/nutui-auto-import-resolver/README.md

@@ -0,0 +1,165 @@
+# NutUI Auto Import Resolver
+
+English | [简体中文](./README.zh-CN.md)
+
+`@nutui/auto-import-resolver` is a resolver for [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) that enables on-demand importing of NutUI components.
+
+### Features
+
+- Supports `Vite`, `Webpack`, `Vue CLI`, and more.
+- Style files support CSS, SASS, default CSS
+- Automatically imports the corresponding CSS styles for the components.
+
+### Installation
+
+```shell
+# via pnpm
+pnpm add @nutui/auto-import-resolver unplugin-vue-components -D
+
+# via npm
+npm i @nutui/auto-import-resolver unplugin-vue-components -D
+
+# via yarn
+yarn add @nutui/auto-import-resolver unplugin-vue-components -D
+
+# via Bun
+bun add @nutui/auto-import-resolver unplugin-vue-components -D
+```
+
+## Usage Default
+
+### Vite
+
+```ts
+// vite.config.ts
+import Components from 'unplugin-vue-components/vite';
+import NutUIResolver from '@nutui/auto-import-resolver';
+
+export default defineConfig({
+  plugins: [
+    Components({
+      resolvers: [NutUIResolver()],
+    }),
+  ]
+});
+```
+
+### Vue CLI
+
+```ts
+// vue.config.js
+import Components from 'unplugin-vue-components/webpack';
+const NutUIResolver = require('@nutui/auto-import-resolver');
+
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      Components({
+        resolvers: [NutUIResolver()],
+      }),
+    ],
+  }
+};
+```
+
+### Webpack
+
+```ts
+// webpack.config.js
+import Components from 'unplugin-vue-components/webpack';
+const NutUIResolver = require('@nutui/auto-import-resolver');
+
+module.exports = {
+  plugins: [
+    Components({
+      resolvers: [NutUIResolver()],
+    }),
+  ]
+};
+```
+
+## Usage Sass
+
+### Vite
+
+```ts
+// vite.config.ts
+import Components from 'unplugin-vue-components/vite';
+import NutUIResolver from '@nutui/auto-import-resolver';
+
+export default defineConfig({
+  plugins: [
+    Components({
+      resolvers: [NutUIResolver({ importStyle: 'sass' })]
+    })
+  ],
+  // 配置全局样式变量
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
+      }
+    }
+  }
+});
+```
+
+### Vue CLI
+
+```ts
+// vue.config.js
+import Components from 'unplugin-vue-components/webpack';
+const NutUIResolver = require('@nutui/auto-import-resolver');
+
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      Components({
+        resolvers: [NutUIResolver({ importStyle: 'sass' })]
+      })
+    ]
+  },
+  // 配置全局样式变量
+  css: {
+    loaderOptions: {
+      scss: {
+        additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
+      }
+    }
+  }
+};
+```
+
+### Webpack
+
+```ts
+// webpack.config.js
+import Components from 'unplugin-vue-components/webpack';
+const NutUIResolver = require('@nutui/auto-import-resolver');
+
+module.exports = {
+  plugins: [
+    Components({
+      resolvers: [NutUIResolver({ importStyle: 'sass' })]
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            // 配置全局样式变量
+            loader: 'sass-loader',
+            options: {
+              additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
+            }
+          }
+        ]
+      }
+    ]
+  }
+};
+```

packages/nutui-auto-import-resolver/README.zh-CN.md

@@ -0,0 +1,165 @@
+# Nutui Auto Import Resolver
+
+[English](./README.md) | 简体中文
+
+`@nutui/auto-import-resolver` 是 [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) 的一个解析器，用于实现 NutUI 按需引入。
+
+### 特性
+
+- 支持 `Vite`, `Webpack`, `Vue CLI` 等
+- 样式文件支持 CSS，SASS，默认 CSS
+- 支持自动引入组件对应的 CSS 样式
+
+### 安装
+
+```shell
+# via pnpm
+pnpm add @nutui/auto-import-resolver unplugin-vue-components -D
+
+# via npm
+npm i @nutui/auto-import-resolver unplugin-vue-components -D
+
+# via yarn
+yarn add @nutui/auto-import-resolver unplugin-vue-components -D
+
+# via Bun
+bun add @nutui/auto-import-resolver unplugin-vue-components -D
+```
+
+## 默认使用
+
+### Vite
+
+```ts
+// vite.config.ts
+import Components from 'unplugin-vue-components/vite';
+import NutUIResolver from '@nutui/auto-import-resolver';
+
+export default defineConfig({
+  plugins: [
+    Components({
+      resolvers: [NutUIResolver()]
+    })
+  ]
+});
+```
+
+### Vue CLI
+
+```ts
+// vue.config.js
+import Components from 'unplugin-vue-components/webpack';
+const NutUIResolver = require('@nutui/auto-import-resolver');
+
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      Components({
+        resolvers: [NutUIResolver()]
+      })
+    ]
+  }
+};
+```
+
+### Webpack
+
+```ts
+// webpack.config.js
+import Components from 'unplugin-vue-components/webpack';
+const NutUIResolver = require('@nutui/auto-import-resolver');
+
+module.exports = {
+  plugins: [
+    Components({
+      resolvers: [NutUIResolver()]
+    })
+  ]
+};
+```
+
+## 使用 Sass
+
+### Vite
+
+```ts
+// vite.config.ts
+import Components from 'unplugin-vue-components/vite';
+import NutUIResolver from '@nutui/auto-import-resolver';
+
+export default defineConfig({
+  plugins: [
+    Components({
+      resolvers: [NutUIResolver({ importStyle: 'sass' })]
+    })
+  ],
+  // 配置全局样式变量
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
+      }
+    }
+  }
+});
+```
+
+### Vue CLI
+
+```ts
+// vue.config.js
+import Components from 'unplugin-vue-components/webpack';
+const NutUIResolver = require('@nutui/auto-import-resolver');
+
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      Components({
+        resolvers: [NutUIResolver({ importStyle: 'sass' })]
+      })
+    ]
+  },
+  // 配置全局样式变量
+  css: {
+    loaderOptions: {
+      scss: {
+        additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
+      }
+    }
+  }
+};
+```
+
+### Webpack
+
+```ts
+// webpack.config.js
+import Components from 'unplugin-vue-components/webpack';
+const NutUIResolver = require('@nutui/auto-import-resolver');
+
+module.exports = {
+  plugins: [
+    Components({
+      resolvers: [NutUIResolver({ importStyle: 'sass' })]
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            // 配置全局样式变量
+            loader: 'sass-loader',
+            options: {
+              additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
+            }
+          }
+        ]
+      }
+    ]
+  }
+};
+```

packages/nutui-auto-import-resolver/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@nutui/auto-import-resolver",
+  "version": "0.0.1",
+  "description": "nutui auto import resolver based on unplugin-vue-components",
+  "keywords": [
+    "nutui",
+    "vue",
+    "resolver",
+    "jdf2e"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "README.zh-CN.md",
+    "package.json"
+  ],
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build": "pnpm clean && vite build && pnpm build:types"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jdf2e/nutui.git",
+    "directory": "packages/nutui-auto-import-resolver"
+  },
+  "homepage": "https://github.com/jdf2e/nutui/tree/v4/packages/nutui-auto-import-resolver",
+  "bugs": {
+    "url": "https://github.com/jdf2e/nutui/issues"
+  },
+  "author": "jdf2e",
+  "license": "MIT",
+  "devDependencies": {
+    "rimraf": "^5.0.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.4.9"
+  }
+}