dolphincss 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/MainCss/glass.css +80 -0
- package/MainCss/motion.css +74 -0
- package/MainCss/sideNave.css +347 -0
- package/MainCss/variable.css +160 -25
- package/README.md +8 -16
- package/dolphin-css.css +2 -0
- package/package.json +44 -42
- package/src/App.jsx +176 -87
- package/src/dolphin-css/App.css +21 -0
- package/src/dolphin-css/index.css +1 -0
- package/src/examples/index.html +13 -0
- package/src/examples/package.json +20 -0
- package/src/examples/src/App.jsx +32 -0
- package/src/examples/src/main.jsx +10 -0
- package/src/examples/vite.config.js +14 -0
- package/src/index.css +1 -23
- package/src/main.jsx +11 -11
- package/vite.config.js +35 -16
package/src/App.jsx
CHANGED
|
@@ -1,102 +1,191 @@
|
|
|
1
|
-
import React, { useState
|
|
2
|
-
import
|
|
3
|
-
import "./App.css";
|
|
4
|
-
import { Mail, Lock, Eye, EyeOff } from "lucide-react";
|
|
5
|
-
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import '../src/dolphin-css/App.css'
|
|
6
3
|
export default function App() {
|
|
7
|
-
const [theme, setTheme] = useState(
|
|
8
|
-
const [
|
|
9
|
-
const [
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
document.documentElement.setAttribute("data-theme", theme);
|
|
13
|
-
localStorage.setItem("theme", theme);
|
|
14
|
-
}, [theme]);
|
|
15
|
-
|
|
16
|
-
const toggleTheme = () =>
|
|
17
|
-
setTheme(theme === "light" ? "dark" : "light");
|
|
18
|
-
|
|
19
|
-
const handleChange = (e) =>
|
|
20
|
-
setForm({ ...form, [e.target.name]: e.target.value });
|
|
4
|
+
const [theme, setTheme] = useState("light");
|
|
5
|
+
const [sidenavOpen, setSidenavOpen] = useState(true);
|
|
6
|
+
const [glassVariant, setGlassVariant] = useState("glass-primary");
|
|
7
|
+
const [userMenuOpen, setUserMenuOpen] = useState(false);
|
|
8
|
+
const [activeItem, setActiveItem] = useState("dashboard");
|
|
21
9
|
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
|
|
10
|
+
const toggleTheme = () => {
|
|
11
|
+
const newTheme = theme === "light" ? "dark" : "light";
|
|
12
|
+
setTheme(newTheme);
|
|
13
|
+
document.documentElement.setAttribute("data-theme", newTheme);
|
|
25
14
|
};
|
|
26
15
|
|
|
16
|
+
const navItems = [
|
|
17
|
+
{ id: "dashboard", icon: "📊", label: "Dashboard" },
|
|
18
|
+
{ id: "users", icon: "👥", label: "Users" },
|
|
19
|
+
{ id: "reports", icon: "📈", label: "Reports" },
|
|
20
|
+
{ id: "settings", icon: "⚙️", label: "Settings" },
|
|
21
|
+
{ id: "analytics", icon: "📊", label: "Analytics" },
|
|
22
|
+
{ id: "messages", icon: "💬", label: "Messages" }
|
|
23
|
+
];
|
|
24
|
+
|
|
27
25
|
return (
|
|
28
|
-
<div
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
26
|
+
<div className="min-h-screen flex bg-gray-100 dark:bg-gray-900 transition-colors duration-500">
|
|
27
|
+
{/* Admin Side Navigation */}
|
|
28
|
+
<nav className={`admin-nav motion ${!sidenavOpen ? "collapsed" : ""} ${glassVariant}`}>
|
|
29
|
+
{/* Header */}
|
|
30
|
+
<div className="admin-nav-header">
|
|
31
|
+
<div className="admin-nav-brand">
|
|
32
|
+
<div className="admin-nav-logo">🌊</div>
|
|
33
|
+
<div className="admin-nav-title">DolphinCSS</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
37
|
+
{/* Navigation Items */}
|
|
38
|
+
<div className="admin-nav-items">
|
|
39
|
+
{navItems.map(item => (
|
|
40
|
+
<a
|
|
41
|
+
key={item.id}
|
|
42
|
+
href="#"
|
|
43
|
+
className={`admin-nav-item motion ${activeItem === item.id ? "active" : ""}`}
|
|
44
|
+
onClick={(e) => {
|
|
45
|
+
e.preventDefault();
|
|
46
|
+
setActiveItem(item.id);
|
|
47
|
+
}}
|
|
48
|
+
>
|
|
49
|
+
<div className="admin-nav-icon">{item.icon}</div>
|
|
50
|
+
<div className="admin-nav-text">{item.label}</div>
|
|
51
|
+
<div className="admin-nav-tooltip">{item.label}</div>
|
|
52
|
+
</a>
|
|
53
|
+
))}
|
|
54
|
+
</div>
|
|
47
55
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}}
|
|
56
|
-
>
|
|
57
|
-
{/* Email Field */}
|
|
58
|
-
<div className="floatinglabel input-icon-left primary glow ">
|
|
59
|
-
<Mail />
|
|
60
|
-
<input
|
|
61
|
-
type="email"
|
|
62
|
-
name="email"
|
|
63
|
-
placeholder="Email"
|
|
64
|
-
value={form.email}
|
|
65
|
-
onChange={handleChange}
|
|
66
|
-
required
|
|
67
|
-
className="floatinglabel-input "
|
|
68
|
-
/>
|
|
69
|
-
<label className="floatinglabel-label">Email Address</label>
|
|
56
|
+
{/* User Section */}
|
|
57
|
+
<div className="admin-nav-user">
|
|
58
|
+
<div className="admin-nav-avatar">JD</div>
|
|
59
|
+
<div className="admin-nav-user-info">
|
|
60
|
+
<div className="admin-nav-user-name">John Doe</div>
|
|
61
|
+
<div className="admin-nav-user-role">Administrator</div>
|
|
62
|
+
</div>
|
|
70
63
|
</div>
|
|
71
64
|
|
|
72
|
-
{/*
|
|
73
|
-
<div className="
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
>
|
|
88
|
-
{showPassword ? <EyeOff /> : <Eye />}
|
|
89
|
-
</span>
|
|
65
|
+
{/* Glass Variant Selector */}
|
|
66
|
+
<div className="p-4 border-t border-color-border">
|
|
67
|
+
<h3 className="text-color-text text-sm font-semibold mb-2">Glass Style:</h3>
|
|
68
|
+
<div className="flex flex-wrap gap-1">
|
|
69
|
+
{["glass-primary", "glass-success", "glass-warning", "glass-danger", "glass-info"].map(variant => (
|
|
70
|
+
<button
|
|
71
|
+
key={variant}
|
|
72
|
+
className={`px-2 py-1 rounded text-xs border ${
|
|
73
|
+
glassVariant === variant ? "border-color-primary bg-color-primary text-color-text" : "border-color-border text-color-text-muted"
|
|
74
|
+
}`}
|
|
75
|
+
onClick={() => setGlassVariant(variant)}
|
|
76
|
+
>
|
|
77
|
+
{variant.split("-")[1]}
|
|
78
|
+
</button>
|
|
79
|
+
))}
|
|
80
|
+
</div>
|
|
90
81
|
</div>
|
|
91
82
|
|
|
92
|
-
{/*
|
|
93
|
-
<button
|
|
94
|
-
|
|
95
|
-
|
|
83
|
+
{/* Toggle Button */}
|
|
84
|
+
<button
|
|
85
|
+
className="admin-nav-toggle"
|
|
86
|
+
onClick={() => setSidenavOpen(!sidenavOpen)}
|
|
96
87
|
>
|
|
97
|
-
|
|
88
|
+
{sidenavOpen ? "←" : "→"}
|
|
98
89
|
</button>
|
|
99
|
-
</
|
|
90
|
+
</nav>
|
|
91
|
+
|
|
92
|
+
{/* Main Content */}
|
|
93
|
+
<div className="flex-1 p-8">
|
|
94
|
+
<div className="flex items-center justify-between mb-8">
|
|
95
|
+
<h1 className="text-3xl font-bold text-color-text">Admin Dashboard</h1>
|
|
96
|
+
|
|
97
|
+
<div className="flex items-center gap-4">
|
|
98
|
+
<button
|
|
99
|
+
className="filled primary md motion hover-pulse"
|
|
100
|
+
onClick={() => setSidenavOpen(!sidenavOpen)}
|
|
101
|
+
>
|
|
102
|
+
{sidenavOpen ? "← Collapse" : "→ Expand"}
|
|
103
|
+
</button>
|
|
104
|
+
|
|
105
|
+
<button
|
|
106
|
+
className="outlined primary md motion"
|
|
107
|
+
onClick={toggleTheme}
|
|
108
|
+
>
|
|
109
|
+
{theme === "light" ? "🌙 Dark" : "☀️ Light"}
|
|
110
|
+
</button>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
{/* Stats Cards */}
|
|
115
|
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
116
|
+
{[
|
|
117
|
+
{ title: "Total Users", value: "12,458", change: "+12%", positive: true },
|
|
118
|
+
{ title: "Revenue", value: "$45,678", change: "+8%", positive: true },
|
|
119
|
+
{ title: "Orders", value: "2,345", change: "-3%", positive: false },
|
|
120
|
+
{ title: "Conversion", value: "4.8%", change: "+2%", positive: true }
|
|
121
|
+
].map((stat, index) => (
|
|
122
|
+
<div key={index} className="card motion hover-wave">
|
|
123
|
+
<div className="flex justify-between items-start">
|
|
124
|
+
<div>
|
|
125
|
+
<h3 className="text-color-text-muted text-sm font-medium">{stat.title}</h3>
|
|
126
|
+
<p className="text-2xl font-bold text-color-text mt-2">{stat.value}</p>
|
|
127
|
+
</div>
|
|
128
|
+
<div className={`badge sm ${stat.positive ? "success" : "danger"} filled`}>
|
|
129
|
+
{stat.change}
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
))}
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
{/* Main Content Area */}
|
|
137
|
+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
138
|
+
{/* Glass Content */}
|
|
139
|
+
<div className="lg:col-span-2">
|
|
140
|
+
<div className={`glass glass-lg motion ${glassVariant}`}>
|
|
141
|
+
<h2 className="text-color-text text-xl font-bold mb-4">Welcome to DolphinCSS</h2>
|
|
142
|
+
<p className="text-color-text-muted mb-4">
|
|
143
|
+
This is a modern admin dashboard built with DolphinCSS. Experience the power of
|
|
144
|
+
glass morphism, smooth animations, and customizable themes.
|
|
145
|
+
</p>
|
|
146
|
+
|
|
147
|
+
<div className="flex gap-4 mt-6">
|
|
148
|
+
<button className="filled primary md">Get Started</button>
|
|
149
|
+
<button className="outlined primary md">Learn More</button>
|
|
150
|
+
<button className="filled primary md">check</button>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
{/* Quick Actions */}
|
|
156
|
+
<div className="space-y-4">
|
|
157
|
+
<h3 className="text-color-text font-semibold mb-4">Quick Actions</h3>
|
|
158
|
+
|
|
159
|
+
{[
|
|
160
|
+
{ icon: "➕", label: "Add User", variant: "primary" },
|
|
161
|
+
{ icon: "📧", label: "Send Email", variant: "success" },
|
|
162
|
+
{ icon: "📊", label: "Generate Report", variant: "warning" },
|
|
163
|
+
{ icon: "⚙️", label: "Settings", variant: "info" }
|
|
164
|
+
].map((action, index) => (
|
|
165
|
+
<button
|
|
166
|
+
key={index}
|
|
167
|
+
className={`w-full filled ${action.variant} md motion hover-pulse flex items-center gap-3`}
|
|
168
|
+
>
|
|
169
|
+
<span className="text-lg">{action.icon}</span>
|
|
170
|
+
<span>{action.label}</span>
|
|
171
|
+
</button>
|
|
172
|
+
))}
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
{/* Current Active Section */}
|
|
177
|
+
<div className="mt-8">
|
|
178
|
+
<div className="card">
|
|
179
|
+
<h3 className="text-color-text font-semibold mb-4">
|
|
180
|
+
Active Section: <span className="text-color-primary capitalize">{activeItem}</span>
|
|
181
|
+
</h3>
|
|
182
|
+
<p className="text-color-text-muted">
|
|
183
|
+
You are currently viewing the {activeItem} section. Use the navigation menu to explore other sections.
|
|
184
|
+
</p>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
100
189
|
</div>
|
|
101
190
|
);
|
|
102
|
-
}
|
|
191
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* App.css - USE THESE RELATIVE PATHS */
|
|
2
|
+
@import "tailwindcss";
|
|
3
|
+
@import "../../MainCss/global.css";
|
|
4
|
+
@import "../../MainCss/variable.css";
|
|
5
|
+
@import "../../MainCss/badge.css";
|
|
6
|
+
@import "../../MainCss/card.css";
|
|
7
|
+
@import "../../MainCss/chartCard.css";
|
|
8
|
+
@import "../../MainCss/darkVariable.css";
|
|
9
|
+
@import "../../MainCss/form.css";
|
|
10
|
+
@import "../../MainCss/glow.css";
|
|
11
|
+
@import "../../MainCss/gradient.css";
|
|
12
|
+
@import "../../MainCss/icon.css";
|
|
13
|
+
@import "../../MainCss/kpi.css";
|
|
14
|
+
@import "../../MainCss/layout.css";
|
|
15
|
+
@import "../../MainCss/nav.css";
|
|
16
|
+
@import "../../MainCss/radio.css";
|
|
17
|
+
@import "../../MainCss/size.css";
|
|
18
|
+
@import "../../MainCss/table.css";
|
|
19
|
+
@import "../../MainCss/sideNave.css";
|
|
20
|
+
@import "../../MainCss/glass.css";
|
|
21
|
+
@import "../../MainCss/motion.css";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>DolphinCSS Example</title>
|
|
7
|
+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="root"></div>
|
|
11
|
+
<script type="module" src="./src/main.jsx"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "dolphincss-examples",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"private": true,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"preview": "vite preview"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"react": "^19.1.1",
|
|
13
|
+
"react-dom": "^19.1.1",
|
|
14
|
+
"dolphincss": "file:.."
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@vitejs/plugin-react": "^5.0.4",
|
|
18
|
+
"vite": "^7.1.7"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import '../../dolphin-css/App.css'
|
|
3
|
+
export default function App() {
|
|
4
|
+
const [theme, setTheme] = useState("light");
|
|
5
|
+
|
|
6
|
+
const toggleTheme = () => {
|
|
7
|
+
const newTheme = theme === "light" ? "dark" : "light";
|
|
8
|
+
setTheme(newTheme);
|
|
9
|
+
document.documentElement.setAttribute("data-theme", newTheme);
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
return (
|
|
13
|
+
<div className="min-h-screen p-8 bg-gray-100 dark:bg-gray-900 transition-all duration-300">
|
|
14
|
+
<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
|
15
|
+
DolphinCSS Example
|
|
16
|
+
</h1>
|
|
17
|
+
|
|
18
|
+
<button
|
|
19
|
+
className="filled primary glass px-4 py-2 rounded"
|
|
20
|
+
onClick={toggleTheme}
|
|
21
|
+
>
|
|
22
|
+
Toggle Theme
|
|
23
|
+
</button>
|
|
24
|
+
|
|
25
|
+
<div className="mt-6 flex gap-4">
|
|
26
|
+
<button className="circle filled primary p-3">Primary</button>
|
|
27
|
+
<button className="outlined success glass px-4 py-2">Success</button>
|
|
28
|
+
<button className="plain danger glass px-4 py-2">Danger</button>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import ReactDOM from "react-dom/client";
|
|
3
|
+
import App from "./App.jsx";
|
|
4
|
+
import '../../dolphin-css/App.css'; // <-- main DolphinCSS import
|
|
5
|
+
|
|
6
|
+
ReactDOM.createRoot(document.getElementById("root")).render(
|
|
7
|
+
<React.StrictMode>
|
|
8
|
+
<App />
|
|
9
|
+
</React.StrictMode>
|
|
10
|
+
);
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
import react from '@vitejs/plugin-react';
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
root: '.', // index.html भएको folder
|
|
6
|
+
plugins: [react()],
|
|
7
|
+
server: {
|
|
8
|
+
open: true,
|
|
9
|
+
port: 5173
|
|
10
|
+
},
|
|
11
|
+
build: {
|
|
12
|
+
outDir: 'dist'
|
|
13
|
+
}
|
|
14
|
+
});
|
package/src/index.css
CHANGED
|
@@ -1,23 +1 @@
|
|
|
1
|
-
|
|
2
|
-
@import "tailwindcss";
|
|
3
|
-
@import '../MainCss/variable.css';
|
|
4
|
-
@import '../MainCss/darkVariable.css';
|
|
5
|
-
|
|
6
|
-
/* Global & Layout */
|
|
7
|
-
@import '../MainCss/global.css';
|
|
8
|
-
@import '../MainCss/glow.css';
|
|
9
|
-
@import '../MainCss/layout.css';
|
|
10
|
-
|
|
11
|
-
/* Components */
|
|
12
|
-
@import '../MainCss/form.css';
|
|
13
|
-
@import '../MainCss/card.css';
|
|
14
|
-
@import '../MainCss/table.css';
|
|
15
|
-
@import '../MainCss/badge.css';
|
|
16
|
-
@import '../MainCss/chartCard.css';
|
|
17
|
-
|
|
18
|
-
/* Utilities / Extras */
|
|
19
|
-
@import '../MainCss/gradient.css';
|
|
20
|
-
@import '../MainCss/icon.css';
|
|
21
|
-
@import '../MainCss/kpi.css';
|
|
22
|
-
@import '../MainCss/size.css';
|
|
23
|
-
@import '../MainCss/nav.css';
|
|
1
|
+
@import "tailwindcss";
|
package/src/main.jsx
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { StrictMode } from 'react'
|
|
3
|
-
import { createRoot } from 'react-dom/client'
|
|
4
|
-
import './index.css'
|
|
5
|
-
import App from './App.jsx'
|
|
6
|
-
|
|
7
|
-
createRoot(document.getElementById('root')).render(
|
|
8
|
-
<StrictMode>
|
|
9
|
-
<App />
|
|
10
|
-
</StrictMode>,
|
|
11
|
-
)
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { StrictMode } from 'react'
|
|
3
|
+
import { createRoot } from 'react-dom/client'
|
|
4
|
+
import './dolphin-css/index.css'
|
|
5
|
+
import App from './App.jsx'
|
|
6
|
+
|
|
7
|
+
createRoot(document.getElementById('root')).render(
|
|
8
|
+
<StrictMode>
|
|
9
|
+
<App />
|
|
10
|
+
</StrictMode>,
|
|
11
|
+
)
|
package/vite.config.js
CHANGED
|
@@ -1,17 +1,36 @@
|
|
|
1
|
-
import { defineConfig } from 'vite';
|
|
2
|
-
import tailwindcss from '@tailwindcss/vite';
|
|
3
|
-
import react from '@vitejs/plugin-react';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
},
|
|
16
|
-
},
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
import tailwindcss from '@tailwindcss/vite';
|
|
3
|
+
import react from '@vitejs/plugin-react';
|
|
4
|
+
import path from 'path';
|
|
5
|
+
import { fileURLToPath } from 'url';
|
|
6
|
+
|
|
7
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
8
|
+
const __dirname = path.dirname(__filename);
|
|
9
|
+
|
|
10
|
+
export default defineConfig({
|
|
11
|
+
plugins: [tailwindcss(), react()],
|
|
12
|
+
resolve: {
|
|
13
|
+
alias: {
|
|
14
|
+
'@maincss': path.resolve(__dirname, 'MainCss'),
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
build: {
|
|
18
|
+
outDir: 'dist',
|
|
19
|
+
rollupOptions: {
|
|
20
|
+
input: {
|
|
21
|
+
main: path.resolve(__dirname, 'index.html'),
|
|
22
|
+
css: path.resolve(__dirname, 'src/dolphin-css/App.css')
|
|
23
|
+
},
|
|
24
|
+
output: {
|
|
25
|
+
assetFileNames: (assetInfo) => {
|
|
26
|
+
if (assetInfo.name === 'App.css') {
|
|
27
|
+
return 'dolphin-css.css';
|
|
28
|
+
}
|
|
29
|
+
return 'assets/[name]-[hash][extname]';
|
|
30
|
+
},
|
|
31
|
+
entryFileNames: 'index.js',
|
|
32
|
+
chunkFileNames: 'chunks/[name].js',
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
},
|
|
17
36
|
});
|