Crear archivos CSS separados en rollos postcss &

Quiero cada uno css archivo Importo en mi JS para crear un nuevo archivo css para mi construcción. Por ejemplo:

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

crearía dist/app.css y dist/admin.css. Estoy usando rollup y aquí está mi archivo de config:

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

Pregunta hecha hace 3 años, 4 meses, 27 días - Por syntaxsavvy

5 Respuestas:

• No se ha documentado pero se puede utilizar include, exclude según su código fuente.

  Un ejemplo aquí para dos archivos css:

  import { resolve } from "path"
  

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

  Y si quieres excluir un archivo:

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

  Respondida el Dec 18, 2020 a las 23:09 - por codeartisan

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• He creado un plugin - rollup-plugin-lib-style que genera CSS por separado para cada archivo de estilo e importa estos archivos generados CSS (como módulos CSS).

  Respondida el Dec 18, 2020 a las 23:19 - por algorithmalchemist

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• Esto es lo que terminé

  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(),
  ]
  

  Respondida el Dec 18, 2020 a las 23:27 - por geekguru

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El problema que estás teniendo es que estás importando los archivos CSS directamente en tu archivo JS, pero quieres que cada archivo CSS se compile a un archivo separado en la carpeta dist. Para lograr esto, necesitas ajustar un poco tu configuración de Rollup y hacer algunos cambios en la forma en que importas los archivos CSS en tu archivo JS.

  Aquí tienes una solución para lograr lo que quieres:

  • En tu archivo de configuración de Rollup, debes ajustar el manejo de los archivos CSS para que se generen archivos separados en la carpeta `dist`. Puedes lograr esto utilizando el plugin `rollup-plugin-copy` para copiar los archivos CSS originales a la carpeta `dist` y el plugin `rollup-plugin-includepaths` para manejar las rutas de los archivos CSS.

  ```js 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 copy from "rollup-plugin-copy"; import includePaths from "rollup-plugin-includepaths";

  const dev

  Respondida el Dec 19, 2020 a las 23:10 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• Para crear archivos CSS separados para cada importación en tu archivo JS utilizando Rollup y PostCSS, puedes utilizar la opción modules en la configuración de PostCSS:

  js
  import postcss from "rollup-plugin-postcss";
  
  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()],
        modules: true, // Habilita la generación de módulos CSS
        extract: true,
        sourceMap: "inline",
        minimize: !dev,
      }),
      commonjs(),
      !dev && terser(),
    ],
    watch: {
      clearScreen: false,
    },
  };
  

  La opción modules le indica a PostCSS que genere archivos CSS separados para cada importación de CSS en tu archivo JS. Estos archivos CSS tendrán nombres de archivo basados en el nombre del módulo o componente que los importa.

  Por ejemplo, si tienes los siguientes archivos CSS:

  css
  // app.css
  .app {
    color: red;
  }
  
  // admin.css
  .admin {
    color: blue;
  }
  

  Y los importas en tu archivo JS de la siguiente manera:

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

  PostCSS generará los siguientes archivos CSS:

  css
  // dist/app.css
  .app-module_app {
    color: red;
  }
  
  // dist/admin.css
  .admin-module_admin {
    color: blue;
  }
  

  Puedes verificar que estos archivos CSS se generen correctamente ejecutando el comando rollup -c.

  Respondida el Dec 19, 2020 a las 23:14 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---