Создайте отдельные файлы CSS в postcss и rollup

Я хочу, чтобы каждый файл css, который я импортирую в свой JS, создавал новый файл css для моей сборки. Например:

import "./app.css";
import "./admin.css";

создаст dist/app.css и dist/admin.css. Я использую накопитель, и вот мой файл конфигурации:

import commonjs from "@rollup/plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import resolve from "@rollup/plugin-node-resolve";
import { terser } from "rollup-plugin-terser";

import postcssImport from "postcss-import";
import postcssNested from "postcss-nested";
import autoprefixer from "autoprefixer";

const dev = process.env.WP_ENV === "development";

export default {
  input: "src/main.js",
  output: {
    sourcemap: dev,
    format: "iife",
    name: "main",
    file: "dist/main.bundle.js",
  },
  plugins: [
    resolve({
      browser: true,
    }),
    postcss({
      plugins: [postcssImport(), postcssNested(), autoprefixer()],
      extract: true,
      sourceMap: "inline",
      minimize: !dev,
    }),
    commonjs(),
    !dev && terser(),
  ],
  watch: {
    clearScreen: false,
  },
};

🤔 А знаете ли вы, что...
С CSS можно легко встраивать и стилизовать шрифты на веб-странице с помощью @font-face.

[РЕШЕНО]Перейти к решению

7

6 123

3

Css75481 вопрос Build2308 вопросов Rollupjs140 вопросов Postcss109 вопросов

Решено

Это не было задокументировано, но вы можете использовать include, exclude в соответствии с их исходным кодом.

Пример здесь для двух файлов css:

import { resolve } from "path"

plugins: [
  postcss({
    include: "**/admin.css",
    extract: resolve('dist/admin.css')
  }),
  postcss({
    include: "**/app.css",
    extract: resolve('dist/app.css')
  })
]

И если вы хотите исключить один файл:

plugins: [
  postcss({
    exclude: "**/bootstrap.css",
    extract: resolve('dist/app.css')
  }),
  postcss({
    include: "**/bootstrap.css",
    extract: resolve('dist/bootstrap.css')
  })
]

Это то, что я закончил с

import resolve from "@rollup/plugin-node-resolve";

plugins: [
  external(),
  resolve(),
  commonjs(),
  typescript(),
  postcss({
    include: "src/index.css",
    extract: "index.css",
    minimize: true,
    sourceMap: true,
  }),
  postcss({
    include: "src/themes/file2.css",
    extract: "themes/file2.css",
    minimize: true,
    sourceMap: true,
  }),
  terser(),
]

Я создал плагин — rollup-plugin-lib-style, который генерирует CSS отдельно для каждого файла стиля и импортирует эти сгенерированные файлы CSS (как модули CSS).

Создайте отдельные файлы CSS в postcss и rollup

Ответы:

Интересные вопросы для изучения