Tôi đã quản lý để nhập các mô -đun CSS trong lớp React TypeScript của mình bằng cách sử dụng plugin này từ NPM.
Nó đã ngăn chặn tất cả các cảnh báo và tôi đã có thể kiểm tra mã của mình tốt. Tôi có một thành phần nhập mô -đun CSS nằm trong cùng một thư mục:
Bây giờ tôi muốn chuyển mã của mình sang CommonJS để sử dụng nó như một mô -đun React trong các mã khác. Đây là cấu hình cuộn của tôi:
Là một cách để bảo tồn cấu trúc tệp hoặc chuyển đổi theo cách nhập chỉ vào tệp CSS chính xác?
@Modular-CSS/Rollup
Hỗ trợ Rollup cho
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
5.- Cài đặt
- Hỗ trợ phiên bản Rollup
- Phiên bản hỗ trợ phiên bản ⚠
- Tập tin cấu hình
- Tập tin cấu hình
- Trong mã của bạn
- Tùy chọn
Cài đặt
> npm i @modular-css/rollup
Hỗ trợ phiên bản Rollup
Phiên bản hỗ trợ phiên bản ⚠
- Tập tin cấu hình
- Tập tin cấu hình
- Trong mã của bạn
- Tùy chọn
Phiên bản hỗ trợ phiên bản ⚠
Tập tin cấu hình
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
0Tập tin cấu hình
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
1Trong mã của bạn
Tùy chọn
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
2Phiên bản hỗ trợ phiên bản ⚠
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
0- src - components - Text.tsx - Text.module.css 7
- src - components - Text.tsx - Text.module.css 8Tùy chọn
- src - components - Text.tsx - Text.module.css 7
Phiên bản hỗ trợ phiên bản ⚠
- src - components - Text.tsx - Text.module.css 8
- src - components - Text.tsx - Text.module.css 7
- src - components - Text.tsx - Text.module.css 8 declare module '*.module.css' { const classes: { [key: string]: string }; export default classes; } 8 yêu cầu declare module '*.module.css' { const classes: { [key: string]: string }; export default classes; } 9
import css from './Text.module.css'; 6import css from './Text.module.css'; 6
"scripts": { "build": "rollup -c && tsc", "test": "jest" } 1"scripts": { "build": "rollup -c && tsc", "test": "jest" } 1
"scripts": { "build": "rollup -c && tsc", "test": "jest" } 4
import css from './Text.module.css';
7.import babel from 'rollup-plugin-babel'; import typescript from 'rollup-plugin-typescript2'; import pkg from './package.json'; import {terser} from 'rollup-plugin-terser'; import autoprefixer from 'autoprefixer'; import postcss from 'rollup-plugin-postcss'; export default [ // CommonJS { inlineDynamicImports: true, input: './src/index.ts', output: [ { file: pkg.main, format: 'cjs' } ], external: [ ...Object.keys(pkg.dependencies || {}) ], plugins: [ babel({ exclude: 'node_modules/**' }), typescript({ typescript: require('typescript') }), postcss({ plugins: [autoprefixer()], sourceMap: true, extract: true, minimize: true }), terser() // minifies generated bundles ] } ]; 2
"scripts": {
"build": "rollup -c && tsc",
"test": "jest"
}
3."scripts": { "build": "rollup -c && tsc", "test": "jest" } 4
import babel from 'rollup-plugin-babel'; import typescript from 'rollup-plugin-typescript2'; import pkg from './package.json'; import {terser} from 'rollup-plugin-terser'; import autoprefixer from 'autoprefixer'; import postcss from 'rollup-plugin-postcss'; export default [ // CommonJS { inlineDynamicImports: true, input: './src/index.ts', output: [ { file: pkg.main, format: 'cjs' } ], external: [ ...Object.keys(pkg.dependencies || {}) ], plugins: [ babel({ exclude: 'node_modules/**' }), typescript({ typescript: require('typescript') }), postcss({ plugins: [autoprefixer()], sourceMap: true, extract: true, minimize: true }), terser() // minifies generated bundles ] } ]; 2
> npm i @modular-css/rollup0> npm i @modular-css/rollup3
"scripts": {
"build": "rollup -c && tsc",
"test": "jest"
}
8
> npm i @modular-css/rollup5
import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
export default [
// CommonJS
{
inlineDynamicImports: true,
input: './src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs'
}
],
external: [
...Object.keys(pkg.dependencies || {})
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
typescript({
typescript: require('typescript')
}),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: true,
minimize: true
}),
terser() // minifies generated bundles
]
}
];
0 thành import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
export default [
// CommonJS
{
inlineDynamicImports: true,
input: './src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs'
}
],
external: [
...Object.keys(pkg.dependencies || {})
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
typescript({
typescript: require('typescript')
}),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: true,
minimize: true
}),
terser() // minifies generated bundles
]
}
];
1. import babel from 'rollup-plugin-babel'; import typescript from 'rollup-plugin-typescript2'; import pkg from './package.json'; import {terser} from 'rollup-plugin-terser'; import autoprefixer from 'autoprefixer'; import postcss from 'rollup-plugin-postcss'; export default [ // CommonJS { inlineDynamicImports: true, input: './src/index.ts', output: [ { file: pkg.main, format: 'cjs' } ], external: [ ...Object.keys(pkg.dependencies || {}) ], plugins: [ babel({ exclude: 'node_modules/**' }), typescript({ typescript: require('typescript') }), postcss({ plugins: [autoprefixer()], sourceMap: true, extract: true, minimize: true }), terser() // minifies generated bundles ] } ]; 2
Theo mặc định, plugin này sẽ trích xuất và gói CSS trong một tệp riêng biệt. Nếu bạn muốn các kiểu từ mỗi tệp CSS được nhập được xuất dưới dạng chuỗi để sử dụng trong JS, bạn có thể kích hoạt điều này bằng cách đặt
import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
export default [
// CommonJS
{
inlineDynamicImports: true,
input: './src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs'
}
],
external: [
...Object.keys(pkg.dependencies || {})
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
typescript({
typescript: require('typescript')
}),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: true,
minimize: true
}),
terser() // minifies generated bundles
]
}
];
2 thành import css from './Text.module.css';
7. Nếu bạn đang sử dụng tùy chọn này, các móc import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
export default [
// CommonJS
{
inlineDynamicImports: true,
input: './src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs'
}
],
external: [
...Object.keys(pkg.dependencies || {})
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
typescript({
typescript: require('typescript')
}),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: true,
minimize: true
}),
terser() // minifies generated bundles
]
}
];
5 & import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
export default [
// CommonJS
{
inlineDynamicImports: true,
input: './src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs'
}
],
external: [
...Object.keys(pkg.dependencies || {})
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
typescript({
typescript: require('typescript')
}),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: true,
minimize: true
}),
terser() // minifies generated bundles
]
}
];
6 sẽ không chạy so với các kiểu xuất khẩu, bạn nên thực hiện bất kỳ phép biến đổi CSS bổ sung nào trong Hook import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
export default [
// CommonJS
{
inlineDynamicImports: true,
input: './src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs'
}
],
external: [
...Object.keys(pkg.dependencies || {})
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
typescript({
typescript: require('typescript')
}),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: true,
minimize: true
}),
terser() // minifies generated bundles
]
}
];
7 thay thế.will not run against the exported styles, you should perform any additional CSS transformations in the import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
export default [
// CommonJS
{
inlineDynamicImports: true,
input: './src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs'
}
],
external: [
...Object.keys(pkg.dependencies || {})
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
typescript({
typescript: require('typescript')
}),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: true,
minimize: true
}),
terser() // minifies generated bundles
]
}
];
7 hook instead.declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
2will not run against the exported styles, you should perform any additional CSS transformations in the import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
export default [
// CommonJS
{
inlineDynamicImports: true,
input: './src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs'
}
],
external: [
...Object.keys(pkg.dependencies || {})
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
typescript({
typescript: require('typescript')
}),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: true,
minimize: true
}),
terser() // minifies generated bundles
]
}
];
7 hook instead.declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
2Bật
import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import {terser} from 'rollup-plugin-terser';
import autoprefixer from 'autoprefixer';
import postcss from 'rollup-plugin-postcss';
export default [
// CommonJS
{
inlineDynamicImports: true,
input: './src/index.ts',
output: [
{
file: pkg.main,
format: 'cjs'
}
],
external: [
...Object.keys(pkg.dependencies || {})
],
plugins: [
babel({
exclude: 'node_modules/**'
}),
typescript({
typescript: require('typescript')
}),
postcss({
plugins: [autoprefixer()],
sourceMap: true,
extract: true,
minimize: true
}),
terser() // minifies generated bundles
]
}
];
2 cũng sẽ vô hiệu hóa plugin phát ra bất kỳ tài sản nào cũng như SourCemaps (trừ khi bạn chọn lọc rõ ràng vào SourCemaps thông qua tùy chọn "scripts": {
"build": "rollup -c && tsc",
"test": "jest"
}
1)> npm i @modular-css/rollup0
Được đặt thành
import css from './Text.module.css';
7 để cho phép viết các tệp CSS không chứa bất kỳ nội dung nào (như nếu bạn có tệp CSS chỉ chứa các quy tắc > npm i @modular-css/rollup
2).> npm i @modular-css/rollup3
Truyền một ví dụ
> npm i @modular-css/rollup
4 đã được tổ chức cho plugin Rollup.Sau đó, nó sẽ thêm bất kỳ tệp nào được tìm thấy khi đi qua các mô-đun đến nó và cả các tệp phát hiện ra mắt và bất kỳ tệp đã tồn tại nào sẽ được xuất ra trong CSS cuối cùng.> npm i @modular-css/rollup5
Bật đăng nhập Verbose trong khi chạy để giúp chẩn đoán các vấn đề
Tùy chọn chia sẻ
Tất cả các tùy chọn khác được chuyển đến ví dụ
> npm i @modular-css/rollup
4 cơ bản, xem Tùy chọn.