j1ngzoue
Đăng vào ngày 15 tháng 10 năm 2021 • Cập nhật vào ngày 21 tháng 5
Giới thiệu
Bạn có thể kiểm tra ví dụ được giới thiệu ở đây.
Khi phát triển với các mô-đun React và CSS, bạn có thể thấy rằng phần kiểu dáng không an toàn. Giới thiệu một phương pháp kiểu dáng an toàn hơn. Với mục đích đó, tôi đã tạo hai thư viện, vì vậy tôi sẽ giới thiệu chúng.
For that purpose, I created two libraries, so I will introduce them.
- vite-plugin-sass-dts
- Khi Dev hoặc Build được bắt đầu, định nghĩa loại của CSS, SCSS, SASS File được tự động tạo.
- ClassNames-Genenerics
- Tên lớp Bạn có thể sử dụng thư viện hơn kiểu an toàn.
Cài đặt
npm i classnames-generics
npm i -D viet-plugin-sass-dts
Nhập chế độ FullScreenen EXIT Mode FullScreen
Đặt plugin trong tệpimport { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";
import path from "path";
export default defineConfig[{
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer[...args] {
if [args[0] !== "@/styles"] {
return;
}
return {
file: `${path.resolve[
__dirname,
"./src/assets/styles"
]}`,
};
},
},
},
},
plugins: [
react[],
sassDts[{
allGenerate: true,
global: {
generate: true,
outFile: path.resolve[__dirname, "./src/style.d.ts"],
},
}],
],
}];
0. vite.config.tsimport { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";
import path from "path";
export default defineConfig[{
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer[...args] {
if [args[0] !== "@/styles"] {
return;
}
return {
file: `${path.resolve[
__dirname,
"./src/assets/styles"
]}`,
};
},
},
},
},
plugins: [
react[],
sassDts[{
allGenerate: true,
global: {
generate: true,
outFile: path.resolve[__dirname, "./src/style.d.ts"],
},
}],
],
}];
Nhập chế độ FullScreenen EXIT Mode FullScreen
Đặt plugin trong tệpimport { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";
import path from "path";
export default defineConfig[{
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer[...args] {
if [args[0] !== "@/styles"] {
return;
}
return {
file: `${path.resolve[
__dirname,
"./src/assets/styles"
]}`,
};
},
},
},
},
plugins: [
react[],
sassDts[{
allGenerate: true,
global: {
generate: true,
outFile: path.resolve[__dirname, "./src/style.d.ts"],
},
}],
],
}];
0.npm run dev
Nhập chế độ FullScreenen EXIT Mode FullScreen
Đặt plugin trong tệpimport { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";
import path from "path";
export default defineConfig[{
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer[...args] {
if [args[0] !== "@/styles"] {
return;
}
return {
file: `${path.resolve[
__dirname,
"./src/assets/styles"
]}`,
};
},
},
},
},
plugins: [
react[],
sassDts[{
allGenerate: true,
global: {
generate: true,
outFile: path.resolve[__dirname, "./src/style.d.ts"],
},
}],
],
}];
0. vite.config.ts.header-1 {
background-color: common.$primary;
.active {
background-color: black;
}
}
Nhập chế độ FullScreenen EXIT Mode FullScreen
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";
import path from "path";
export default defineConfig[{
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer[...args] {
if [args[0] !== "@/styles"] {
return;
}
return {
file: `${path.resolve[
__dirname,
"./src/assets/styles"
]}`,
};
},
},
},
},
plugins: [
react[],
sassDts[{
allGenerate: true,
global: {
generate: true,
outFile: path.resolve[__dirname, "./src/style.d.ts"],
},
}],
],
}];
0.$primary: violet;
.row {
display: flex;
}
Nhập chế độ FullScreenen EXIT Mode FullScreen
Đặt plugin trong tệpimport { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";
import path from "path";
export default defineConfig[{
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer[...args] {
if [args[0] !== "@/styles"] {
return;
}
return {
file: `${path.resolve[
__dirname,
"./src/assets/styles"
]}`,
};
},
},
},
},
plugins: [
react[],
sassDts[{
allGenerate: true,
global: {
generate: true,
outFile: path.resolve[__dirname, "./src/style.d.ts"],
},
}],
],
}];
0. vite.config.tsimport globalClassNames from './style.d'
declare const classNames: typeof globalClassNames & {
readonly 'header-1': 'header-1';
readonly 'active': 'active';
};
export = classNames;
Nhập chế độ FullScreenen EXIT Mode FullScreen
Đặt plugin trong tệpimport { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";
import path from "path";
export default defineConfig[{
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer[...args] {
if [args[0] !== "@/styles"] {
return;
}
return {
file: `${path.resolve[
__dirname,
"./src/assets/styles"
]}`,
};
},
},
},
},
plugins: [
react[],
sassDts[{
allGenerate: true,
global: {
generate: true,
outFile: path.resolve[__dirname, "./src/style.d.ts"],
},
}],
],
}];
0.declare const classNames: {
readonly 'row': 'row';
};
export = classNames;
Nhập chế độ FullScreenen EXIT Mode FullScreen
Đặt plugin trong tệpimport { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";
import path from "path";
export default defineConfig[{
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer[...args] {
if [args[0] !== "@/styles"] {
return;
}
return {
file: `${path.resolve[
__dirname,
"./src/assets/styles"
]}`,
};
},
},
},
},
plugins: [
react[],
sassDts[{
allGenerate: true,
global: {
generate: true,
outFile: path.resolve[__dirname, "./src/style.d.ts"],
},
}],
],
}];
0. vite.config.tsimport { VFC } from "react";
import styles from "./App.module.scss";
import { classNamesFunc } from "classnames-generics";
const classNames = classNamesFunc[];
type Props = {
active: boolean;
};
export const App: VFC = [props] => {
return [
vite-plugin-sass-dts-example
];
};
Nhập chế độ FullScreenen EXIT Mode FullScreen
Đặt plugin trong tệp
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";
import path from "path";
export default defineConfig[{
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer[...args] {
if [args[0] !== "@/styles"] {
return;
}
return {
file: `${path.resolve[
__dirname,
"./src/assets/styles"
]}`,
};
},
},
},
},
plugins: [
react[],
sassDts[{
allGenerate: true,
global: {
generate: true,
outFile: path.resolve[__dirname, "./src/style.d.ts"],
},
}],
],
}];
0.vite.config.ts
Bắt đầu
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";
import path from "path";
export default defineConfig[{
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer[...args] {
if [args[0] !== "@/styles"] {
return;
}
return {
file: `${path.resolve[
__dirname,
"./src/assets/styles"
]}`,
};
},
},
},
},
plugins: [
react[],
sassDts[{
allGenerate: true,
global: {
generate: true,
outFile: path.resolve[__dirname, "./src/style.d.ts"],
},
}],
],
}];
1 vite.config.tsimport { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";
export default defineConfig[{
plugins: [react[], sassDts[{ allGenerate: true }]],
}];
Nhập chế độ FullScreenen EXIT Mode FullScreen
Đặt plugin trong tệpimport { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";
import path from "path";
export default defineConfig[{
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer[...args] {
if [args[0] !== "@/styles"] {
return;
}
return {
file: `${path.resolve[
__dirname,
"./src/assets/styles"
]}`,
};
},
},
},
},
plugins: [
react[],
sassDts[{
allGenerate: true,
global: {
generate: true,
outFile: path.resolve[__dirname, "./src/style.d.ts"],
},
}],
],
}];
0.npm run build
Nhập chế độ FullScreenen EXIT Mode FullScreen
Đặt plugin trong tệp
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import sassDts from "vite-plugin-sass-dts";
import path from "path";
export default defineConfig[{
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer[...args] {
if [args[0] !== "@/styles"] {
return;
}
return {
file: `${path.resolve[
__dirname,
"./src/assets/styles"
]}`,
};
},
},
},
},
plugins: [
react[],
sassDts[{
allGenerate: true,
global: {
generate: true,
outFile: path.resolve[__dirname, "./src/style.d.ts"],
},
}],
],
}];
0.