Hỗ trợ các mô-đun css

Phân tích sâu hơn về trạng thái bảo trì của các mô-đun vite-plugin-inline-css dựa trên nhịp phiên bản npm đã phát hành, hoạt động của kho lưu trữ và các điểm dữ liệu khác đã xác định rằng việc bảo trì của nó là Bền vững

Chúng tôi nhận thấy rằng vite-plugin-inline-css-modules thể hiện nhịp phát hành phiên bản tích cực với ít nhất một phiên bản mới được phát hành trong 12 tháng qua

Trong tháng trước, chúng tôi không tìm thấy bất kỳ hoạt động yêu cầu kéo nào hoặc thay đổi trạng thái vấn đề đã được phát hiện đối với kho lưu trữ GitHub

esbuild-css-mô-đun-plugin

Một plugin esbuild để gói các mô-đun css vào js[x]/ts[x]

Hoạt động cả với bundle: false và bundle: true

Nếu xây dựng với bundle: false, xxx.modules.css sẽ được chuyển đổi thành xxx.modules.css.js

Xem ./test/test.js để biết ví dụ

Cài đặt

npm i -D esbuild-css-modules-plugin

hoặc là

yarn add -D esbuild-css-modules-plugin

Cách sử dụng

const esbuild = require['esbuild'];
const cssModulesPlugin = require['esbuild-css-modules-plugin'];

esbuild.build[{
  plugins: [
    cssModulesPlugin[{
      // optional. set to false to not inject generated css into page;
      // default value is false when set `v2` to `true`, otherwise default is true,
      // if set to `true`, the generated css will be injected into `head`;
      // could be a string of css selector of the element to inject into,
      // e.g.
      // ```
      // inject: '#some-element-id' // the plugin will try to get `shadowRoot` of the found element, and append css to the `shadowRoot`, if no shadowRoot then append to the found element, if no element found then append to document.head
      // ```
      // could be a function with params content & digest [return a string of js code to inject to page],
      // e.g.
      // ```
      // inject: [cssContent, digest] => `console.log["${cssContent}", "${digest}"]`
      // ```
      inject: false,

      localsConvention: 'camelCaseOnly', // optional. value could be one of 'camelCaseOnly', 'camelCase', 'dashes', 'dashesOnly', default is 'camelCaseOnly'

      generateScopedName: [name, filename, css] => string, // optional. refer to: //github.com/madyankin/postcss-modules#generating-scoped-names

      filter: /\.modules?\.css$/i // Optional. Regex to filter certain CSS files.

      cssModulesOption: {
        // optional, refer to: //github.com/madyankin/postcss-modules/blob/d7cefc427c43bf35f7ebc55e7bda33b4689baf5a/index.d.ts#L27
        // this option will override others passed to postcss-modules
      },

      v2: true, // experimental. v2 can bundle images in css, note if set `v2` to true, other options except `inject` will be ignored. and v2 only works with `bundle: true`.
      v2CssModulesOption: { // Optional.
        dashedIndents: false, // Optional. refer to: //github.com/parcel-bundler/parcel-css/releases/tag/v1.9.0
        /**
         * Optional. The currently supported segments are:
         * [name] - the base name of the CSS file, without the extension
         * [hash] - a hash of the full file path
         * [local] - the original class name
         */
        pattern: `custom-prefix_[local]_[hash]`
      }
    }]
  ]
}];

Làm cách nào để nhập các mô-đun CSS trong TypeScript?

Mô-đun CSS là gì?

Làm cách nào để thêm CSS bên ngoài vào TypeScript?