Mô-đun typescript-plugin-css không hoạt động

@Modular-CSS/Tổng hợp

Rollup support for

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

• Cài đặt
• Rollup version support
• Cách sử dụng
  • API
  • Config file
  • In your code
• Tùy chọn

Cài đặt

> npm i @modular-css/rollup

Rollup version support

Cách sử dụng

• API
• Config file
• In your code
• Tùy chọn

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

API

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

Config file

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

In your code

Tùy chọn

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

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

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

Do thay đổi API, một số phiên bản chính của plugin này sẽ yêu cầu công cụ cuộn phiên bản tối thiểu có thể. Điều này có thể thực hiện trong trường

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

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

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

Tùy chọn

- src - thành phần - Văn bản. tsx - Văn bản. mô-đun. css7

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

- src - thành phần - Văn bản. tsx - Văn bản. mô-đun. css8

Do thay đổi API, một số phiên bản chính của plugin này sẽ yêu cầu công cụ cuộn phiên bản tối thiểu có thể. Điều này có thể thực hiện trong trường

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

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

khai báo mô-đun '*. mô-đun. css' { lớp const. { [Chìa khóa. sợi dây]. sợi dây }; . mô-đun. css' { lớp const. { [Chìa khóa. sợi dây]. sợi dây };

- src
  - components
    - Text.tsx
    - Text.module.css

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

nhập css từ '. /Chữ. mô-đun. css';

- src
  - components
    - Text.tsx
    - Text.module.css

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

"kịch bản". { "xây dựng". "rollup -c && tsc", "kiểm tra". "giỡn" } 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. Default is

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

Để buộc tạo nguồn bên ngoài bản đồ, hãy đặt giá trị thành

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

"kịch bản". { "xây dựng". "rollup -c && tsc", "kiểm tra". "giỡn" } 4

Boolean/chuỗi để xác định xem chunk siêu dữ liệu có nên được bắt đầu hay không. Nếu được đặt thành đúng thì sẽ ghi ra một tệp có tên

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

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

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

Hiện tại siêu dữ liệu duy nhất được viết là CSS phụ thuộc, nhưng điều đó có thể thay đổi trong tương lai

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

8

Plugin Rollup sẽ ghi 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 hoá 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
        ]
    }
];

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

nhập babel từ 'rollup-plugin-babel'; . /bưu kiện. json'; . đúng, đầu vào. '. /src/chỉ mục. ts', đầu ra. [ { tập tin. pkg. chính, định dạng. 'cjs' } ], bên ngoài. [. Sự vật. phím (pkg. phụ thuộc. {}) ], bổ sung. [ babel({ loại trừ. 'node_modules/**' }), bản đánh máy ({ bản đánh máy. yêu cầu ('typescript') }), postcss ({ plugin. [autoprefixer()], sourceMap. đúng, trích xuất. đúng, giảm thiểu. true }), terser() // thu nhỏ các gói được tạo ] } ];

Theo mặc định, plugin này sẽ trích xuất và đóng 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