rollup-plugin-import-cssMột plugin rollup để nhập CSS vào JavaScript 
Cách sử dụngimport css from "rollup-plugin-import-css";
export default {
input: "index.js",
output: { file: "dist/index.js", format: "esm" },
plugins: [ css() ]
};Điều này sẽ làm cho tất cả các tệp CSS đã nhập được gói vào một tệp CSS duy nhất cũng như làm cho các tệp CSS có thể truy cập dưới dạng xuất mặc định. Các plugin này hỗ trợ hai hình thức nhập CSS, khi tệp CSS được nhập mà không có biến được gán, CSS được đưa vào một tệp CSS duy nhất. import "./styles.css";
import styles from "./styles.css"; Nếu bản dựng của bạn sử dụng phân tách mã thông qua nhập động hoặc nhiều điểm nhập, plugin này sẽ kết hợp tất cả các nhập CSS vào một tệp duy nhất. Plugin này tôn trọng thứ tự nhập của các tệp CSS của bạn.
Tùy chọnbao gồmLoại: - src
- components
- Text.tsx
- Text.module.css
6 hoặc - src
- components
- Text.tsx
- Text.module.css
7 Mặc định: - src
- components
- Text.tsx
- Text.module.css
8Một tệp duy nhất hoặc mảng các tệp để bao gồm khi thu nhỏ. loại trừLoại: - src
- components
- Text.tsx
- Text.module.css
6 hoặc - src
- components
- Text.tsx
- Text.module.css
7 Mặc định: - src
- components
- Text.tsx
- Text.module.css
8Một tệp duy nhất hoặc mảng các tệp để bao gồm khi thu nhỏ. loại trừMột tệp duy nhất hoặc mảng các tệp để loại trừ khi thu nhỏ. đầu ra Loại: - src
- components
- Text.tsx
- Text.module.css
7 Mặc định: import css from './Text.module.css';
3Tên tệp đầu ra cho gói CSS. biến đổi Loại: import css from './Text.module.css';
4 Mặc định: import css from './Text.module.css';
3Hàm biến đổi được sử dụng để xử lý CSS, nó nhận được một chuỗi chứa mã để xử lý như một đối số. Hàm sẽ trả về một chuỗi. Minify Loại: import css from './Text.module.css';
6 Mặc định: import css from './Text.module.css';
7Hàm biến đổi được sử dụng để xử lý CSS, nó nhận được một chuỗi chứa mã để xử lý như một đối số. Hàm sẽ trả về một chuỗi. Minify
Loại: import css from './Text.module.css';
6 Mặc định: import css from './Text.module.css';
7Minify CSS đang được nhập khẩu.
Luôn luôn raLuôn xuất ra một gói CSS ngay cả khi đầu ra CSS trống. Tại sao
Với WebComponent Frameworks, nó hữu ích để có thể nhập CSS cho một thành phần. Các giải pháp khác cho Rollup hoặc thiếu các tính năng hoặc lớn và đầy hơi với các tính năng bổ sung mà một số người dùng có thể không cần như SASS hoặc ít hỗ trợ. Plugin này nhỏ và theo mặc định chỉ hỗ trợ CSS đơn giản với tùy chọn để xử lý nó hơn nữa. Không giống như hầu hết các plugin CSS khác, plugin này duy trì thứ tự nhập khẩu của bạn để tránh ghi đè bất ngờ CSS.Vấn đề báo cáoMIT license. 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ội dung chính ShowShow - @Modular-CSS/Rollup
- 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
- Trong mã của bạn
- Tùy chọn
- - 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'; 6
- "scripts": { "build": "rollup -c && tsc", "test": "jest" } 1
- "scripts": { "build": "rollup -c && tsc", "test": "jest" } 4
- Boolean/chuỗi để xác định xem siêu dữ liệu chunk có nên được đầu ra hay không. Nếu được đặt thành true sẽ viết ra một tệp có tên
- > npm i @modular-css/rollup0
- > npm i @modular-css/rollup3
- > npm i @modular-css/rollup5
- Tùy chọn chia sẻ
tsconfig.json {
"compilerOptions": {
"target": "ESNext",
"outDir": "build",
"jsx": "react",
"noImplicitAny": false,
"removeComments": true,
"sourceMap": false,
"module": "ESNext",
"allowJs": true,
"moduleResolution": "node",
"esModuleInterop": true,
"baseUrl": "src",
"plugins": [{ "name": "typescript-plugin-css-modules" }]
},
"exclude": [
"node_modules/"
],
"include": [
"src/*"
]
}
Tôi cũng đã thêm tệp mô -đun sau trong thư mục SRC/ của mình: modules.d.ts declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
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: - src
- components
- Text.tsx
- Text.module.css
Và vì vậy, thành phần của tôi chứa dòng nhập sau: import css from './Text.module.css';
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: package.json "scripts": {
"build": "rollup -c && tsc",
"test": "jest"
}
rollup.config.js 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
]
}
];
Tôi có thể chạy declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
3 mà không có bất kỳ lỗi nào, tuy nhiên khi tôi nhìn vào mã được xây dựng, tệp mô -đun CSS không còn nằm bên cạnh tệp Text.js. Dưới đây là ảnh chụp màn hình của các thư mục được tạo bởi bản dựng:Tất cả các CSS đã được chuyển sang thư mục LIB và trong tệp văn bản được tạo.js: 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? Tôi đã thấy một số cách giải quyết với webpack.config.js (chạy tập lệnh declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
4), tuy nhiên tôi không hoàn toàn dễ dàng với nó (vì nó thêm nhiều tệp và phụ thuộc vào dự án và tôi không chắc chắn làm thế nào để xử lý mọi thứ tốt ).Cảm ơn rất nhiều! @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
- Cách sử dụng
- API
- Tập tin cấu hình
- Trong mã của bạn
- Tùy chọn
Cài đặtimport "./styles.css";
import styles from "./styles.css"; 1Hỗ trợ phiên bản Rollup Cách sử dụng - API
- 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 ⚠APIimport "./styles.css";
import styles from "./styles.css"; 2Tập tin cấu hìnhimport "./styles.css";
import styles from "./styles.css"; 3Trong mã của bạnTùy chọn import "./styles.css";
import styles from "./styles.css"; 4Phiên bản hỗ trợ phiên bản ⚠ declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
0Do thay đổi API, một số phiên bản chính của plugin này sẽ yêu cầu phiên bản cuộn tối thiểu cụ thể. Điều này được thể hiện trong trường declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
6 trong declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
7 và được sao chép ở đây để dễ tham khảo.declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
1Tùy chọn
Phiên bản hỗ trợ phiên bản ⚠Phiên bản hỗ trợ phiên bản ⚠ Do thay đổi API, một số phiên bản chính của plugin này sẽ yêu cầu phiên bản cuộn tối thiểu cụ thể. Điều này được thể hiện trong trường Do thay đổi API, một số phiên bản chính của plugin này sẽ yêu cầu phiên bản cuộn tối thiểu cụ thể. Điều này được thể hiện trong trường declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
6 trong declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
7 và được sao chép ở đây để dễ tham khảo.declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
1- src - components - Text.tsx - Text.module.css 7- src - components - Text.tsx - Text.module.css 8declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
6 trong declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
7 và được sao chép ở đây để dễ tham khảo. 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- src
- components
- Text.tsx
- Text.module.css
0 yêu cầu declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
9import css from './Text.module.css'; 6 import css from './Text.module.css';
7.- src
- components
- Text.tsx
- Text.module.css
2 yêu cầu declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
9"scripts": {
"build": "rollup -c && tsc",
"test": "jest"
}
3."scripts": { "build": "rollup -c && tsc", "test": "jest" } 1Boolean để xác định xem có nên bao gồm các bản đồ nguồn nội tuyến hay không. Mặc định là Để buộc tạo bản đồ nguồn bên ngoài, hãy đặt giá trị thành "scripts": { "build": "rollup -c && tsc", "test": "jest" } 4 "scripts": {
"build": "rollup -c && tsc",
"test": "jest"
}
8
Boolean/chuỗi để xác định xem siêu dữ liệu chunk có nên được đầu ra hay không. Nếu được đặt thành true sẽ viết ra một tệp có tên "scripts": {
"build": "rollup -c && tsc",
"test": "jest"
}
5. Nếu một import css from './Text.module.css';
9 sẽ viết ra tên tệp đó. Mặc định là "scripts": {
"build": "rollup -c && tsc",
"test": "jest"
}
0.Hiện tại siêu dữ liệu duy nhất được viết là phụ thuộc CSS, nhưng điều đó có thể thay đổi trong tương lai.Plugin Rollup sẽ viết lại các định danh không hợp lệ bằng cách mặc định bằng cách mặc định. Bạn có thể vô hiệu hóa hành vi 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
]
}
];
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.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;
}
2 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 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 import "./styles.css";
import styles from "./styles.css"; 12).> npm i @modular-css/rollup3Truyền một ví dụ import "./styles.css";
import styles from "./styles.css"; 14 đã đượ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/rollup5Bậ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ụ import "./styles.css";
import styles from "./styles.css"; 14 cơ bản, xem Tùy chọn.
| 
