Hướng dẫn rollup css modules - cuộn lên mô-đun css

Question

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 Show

@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
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
> 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:

Hướng dẫn rollup css modules - cuộn lên mô-đun css

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 đặt

> npm i @modular-css/rollup

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

Phiên bản hỗ trợ phiên bản ⚠

API

const bundle = await rollup({
    input   : "./index.js",
    plugins : [
        require("@modular-css/rollup")()
    ]
});

Tập tin cấu hình

import css from "@modular-css/rollup";

export default {
    input   : "./index.js",
    output  : {
        dest    : "./gen/bundle.js",
        format  : "umd"
    },
    plugins : [
        css()
    ]
};

Trong mã của bạn

Tùy chọn

/* style.css */
@value error: red;

.rule {
    border: 1px solid error;
}

Phiên bản hỗ trợ phiên bản ⚠

declare module '*.module.css' {
    const classes: { [key: string]: string };
    export default classes;
}

0

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

Tù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

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; } 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;
}

9

import css from './Text.module.css'; 6

- 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" } 1

Boolean để 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à

import css from './Text.module.css';

7.

Để 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"
}

3.

"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

"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.

"scripts": {
  "build": "rollup -c && tsc",
  "test": "jest"
}

8

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.

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;
}

2

Bậ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.

programming css rollup-plugin-import-css rollup-plugin-postcss typescript-plugin-css-modules TypeScript css modules Rollup output css Rollup scss Typescript-plugin-css-modules not working

Hướng dẫn rollup css modules - cuộn lên mô-đun css

@Modular-CSS/Rollup

Cài đặt

Hỗ trợ phiên bản Rollup

Phiên bản hỗ trợ phiên bản ⚠

API

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

"scripts": { "build": "rollup -c && tsc", "test": "jest" } 8

> npm i @modular-css/rollup0

> npm i @modular-css/rollup3

> npm i @modular-css/rollup5

Tùy chọn chia sẻ

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

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

`"scripts": { "build": "rollup -c && tsc", "test": "jest" }`
8